【antd + vue】a-table 树形数据展示 - 嵌套子表格

不懂装懂的不懂

已于 2024-06-12 14:52:16 修改

阅读量2k

点赞数 3

分类专栏： # antd 前端文章标签： javascript 前端框架 anti-design-vue

于 2023-03-09 16:42:55 首次发布

本文链接：https://blog.csdn.net/m0_65041204/article/details/129425766

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

antd

5 篇文章 0 订阅

订阅专栏

一、目标样式

父表格嵌套子表格，子表格默认折叠，点击父表格左侧加号可以展开父表格显示对应的子表格，展示每行数据更详细的信息

目标效果

二、问题样式

（一）问题说明

父表格展开后，子表格展示成功，但是子表格的数据以2种方式各渲染了一次，即：同一个子表格出现两次

问题展示

（二）问题原因

childrenColumnName 的默认值是 children ，所以当数据中的子数据是 children ，展开时会默认加载到子表格中，就会出现子表格重复渲染两次的问题

三、解决办法

将树形结构数据中的 children 改成其它名字，如：改成 childrens

四、代码示例：

1、 html部分


<a-table
    :columns="acList.columns"
    :data-source="acList.dataSource"
    class="tables"
    :pagination="false"
    :rowKey="(record) => record.id"
    :loading="acList.loading"
    >
    // 嵌套子表格
    <template #expandedRowRender="{ record }">
      <a-table
        :columns="acList.columns2"
        :data-source="record.childrens"
        :pagination="false"
        :rowKey="(record) => record.id"
      >
      </a-table>
    </template>
</a-table>

嵌套表格相关参数

嵌套表格可用参数及说明

2、 js部分

vue3定义相关数据


//表格所需数据
    const acList = reactive({
    // 父表格和子表格所需数据
      dataSource: [
          {
            "id": 5,
            "batch": "1",
            "state": 1,
            "stateName": "已完成",
            "childrens": [
                {
                    "id": 11,
                    "roomNum": 1,
                    "state": 1,
                    "stateName": "已完成"
                },
            ]
        },
      ],
      // 父级表格列名
      columns: [
        {
          title: "批次号",
          dataIndex: "batch",
          key: "batch",
        },
        {
          title: "收集状态",
          key: "stateName",
          align: "center",
          slots: {
            customRender: "stateName",
          },
        },
      ],
      // 子表格列名
      columns2: [
        {
          title: "考场号",
          dataIndex: "roomNum",
          key: "roomNum",
          width: 760,
        },
        {
          title: "收集状态",
          dataIndex: "stateName",
          key: "stateName",
          align: "center",
          slots: {
            customRender: "stateName",
          },
        },
      ],
      // 加载状态
      loading: false,
    });