JeecgBoot Vue3 中 BasicTable 组件分组表头的列设置异常

JeecgBoot Vue3 中 BasicTable 组件分组表头的列设置异常

问题：使用 JeecgBoot Vue3 前端框架中的 BasicTable 组件分组表头官方示例时，进行列设置后导致列显示异常

• 官方示例：

  <template>
    <div class="p-4">
      <BasicTable @register="registerTable" />
    </div>
  </template>
  <script lang="ts">
    import { defineComponent } from "vue";
    import { BasicColumn, BasicTable } from "/@/components/Table";
    import { useListPage } from "/@/hooks/system/useListPage";
    import { demoListApi } from "/@/api/demo/table";
  
    //计算合并表头
    export default defineComponent({
      components: { BasicTable },
      setup() {
        // 列表页面公共参数、方法
        const { tableContext } = useListPage({
          tableProps: {
            title: "分组表头示例",
            api: demoListApi,
            columns: getMergeHeaderColumns(),
          },
        });
  
        //BasicTable绑定注册
        const [registerTable] = tableContext;
  
        function getMergeHeaderColumns(): BasicColumn[] {
          return [
            {
              title: "ID",
              dataIndex: "id",
              width: 300,
            },
            {
              title: "姓名",
              dataIndex: "name",
              width: 300,
            },
            {
              title: "地址",
              width: 120,
              children: [
                {
                  title: "地址",
                  dataIndex: "address",
                  key: "address",
                  width: 200,
                },
                {
                  title: "编号",
                  dataIndex: "no",
                  key: "no",
                },
              ],
            },
            {
              title: "开始时间",
              dataIndex: "beginTime",
              width: 200,
            },
            {
              title: "结束时间",
              dataIndex: "endTime",
              width: 200,
            },
          ];
        }
        return {
          registerTable,
        };
      },
    });
  </script>
  

• 实践代码：

  

  如上图所示，父级表头配置没有 dataIndex 属性，那么将会导致如下问题：

  

  只取消选中其中一列分组表头 “总交易”，那么其它所有没有设置父级 dataIndex 属性的分组表头都被隐藏了

  

  

解决办法

为分组表头的父级设置 dataIndex 属性，其值可以自定义字符串，不需要和数据字段对应。如图所示：