＜a-table＞Ant-Design-Vue动态表头并填充数据

<a-table
          :pagination="false"
          ref="tableRef"
          :columns="tableColumns"
          :dataSource="tableData"
          bordered
          size="middle"
          :key="new Date().getTime()//此处未解决重复渲染不成功的问题
          :scroll="{ x: '130%', y: 240 }"
        />

逻辑代码：

nameList对应的是type变量下的对象集合的对应表头名称集合，如果没有导入‘h’请从vue中自行导入。

  const tableColumns = ref();
  const tableData = ref();

  const searchQueryForTable = () => {
      result.value = res;
//表格数据填充
      tableData.value = [
        {
          year: 2022,
          type: [
            {
              fileNumber: 13,
              pageNumber: 13,
              innerNumber: 13,
              attachNumber: 16,
              attachSize: 14,
            },
            {
              fileNumber: 13,
              pageNumber: 13,
              innerNumber: 13,
              attachNumber: 16,
              attachSize: 14,
            },
          ],
        },
        {
          year: 2023,
          type: [
            {
              fileNumber: 13,
              pageNumber: 13,
              innerNumber: 13,
              attachNumber: 16,
              attachSize: 14,
            },
            {
              fileNumber: 13,
              pageNumber: 13,
              innerNumber: 13,
              attachNumber: 16,
              attachSize: 14,
            },
          ],
        },
      ];
      generateColumns();
      generateTableData();
  };

  //生成表头
  const generateColumns = () => {
    tableColumns.value = [
      {
        title: '年度',
        dataIndex: 'year',
        width: 'auto',
        align: 'center',
        fixed: 'left',
      },
      {
        title: '类型',
        dataIndex: 'type',
        width: 100,
        align: 'center',
        key: 'type',
        children: Object.keys(result.value.nameList).map((arcName) => ({
          title: result.value.nameList[arcName],
          dataIndex: `type.${arcName}`,
          width: 'auto',
          align: 'center',
          key: `type.${arcName}`,
          children: [
            {
              title: '案卷（件）数',
              dataIndex: `${arcName}.fileNumber`,
              key: `fileNumber`,
              width: 'auto',
              align: 'center',
              customRender: function ({ record }) {
                return h('div', record.type[arcName].fileNumber);
              },
            },
            {
              title: '页数',
              dataIndex: `${arcName}.pageNumber`,
              key: `pageNumber`,
              width: 'auto',
              align: 'center',
              customRender: function ({ record }) {
                return h('div', record.type[arcName].pageNumber);
              },
            },
            {
              title: '卷内数量',
              dataIndex: `${arcName}.innerNumber`,
              key: `innerNumber`,
              width: 'auto',
              align: 'center',
              customRender: function ({ record }) {
                return h('div', record.type[arcName].innerNumber);
              },
            },
            {
              title: '附件数量',
              dataIndex: `${arcName}.attachNumber`,
              key: `attachNumber`,
              width: 'auto',
              align: 'center',
              customRender: function ({ record }) {
                return h('div', record.type[arcName].attachNumber);
              },
            },
            {
              title: '附件大小',
              dataIndex: `${arcName}.attachSize`,
              key: `attachSize`,
              width: 'auto',
              align: 'center',
              customRender: function ({ record }) {
                return h('div', record.type[arcName].attachSize);
              },
            },
          ],
        })),
      },
    ];
  };

  // 计算每列的合计数据
  const calculateColumnTotal = (tableData) => {
    let columnTotal = {
      year: '合计',
      type: [],
    };
    // 初始化每列的合计值为0
    let total = [];
    // 遍历每一行数据，累加计算每列的合计值
    tableData.forEach((item) => {
      item.type.forEach((typeItem, index) => {
        if (!total[index]) {
          total.push({ fileNumber: 0, pageNumber: 0, innerNumber: 0, attachNumber: 0, attachSize: 0 });
        }
        total[index].fileNumber += typeItem.fileNumber;
        total[index].pageNumber += typeItem.pageNumber;
        total[index].innerNumber += typeItem.innerNumber;
        total[index].attachNumber += typeItem.attachNumber;
        total[index].attachSize += typeItem.attachSizeReal;
      });
    });
    tableData[0].type.forEach((fixItem, index) => {
      total[index].attachSize = (total[index].attachSize / 1024).toFixed(2);
    });
    // 将计算得到的合计值添加到合计行中
    console.log(total);
    columnTotal.type = total;
    return columnTotal;
  };