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>
  • 实践代码:

    img

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

    img

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

    img

    img

解决办法

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

img

posted @   飞仔FeiZai  阅读(569)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示