VUE3、Ant Design Vue表格組件單元格行合并

export const columns: BasicColumn[] = [
  {
    title: '用途層級(jí)1',
    align: 'center',
    width: 100,
    dataIndex: 'useLevel1',
    customCell: (record, index, column) => {
      return { rowSpan: record.useLevel1Rowspan ?? 1 };
    },
  },
  {
    title: '用途層級(jí)2',
    align: 'center',
    width: 100,
    dataIndex: 'useLevel2',
    customCell: (record, index, column) => {
      return { rowSpan: record.useLevel2Rowspan ?? 1 };
    },
  },
  {
    title: '用途層級(jí)3',
    align: 'center',
    width: 100,
    dataIndex: 'useLevel3',
    customCell: (record, index, column) => {
      return { rowSpan: record.useLevel3Rowspan ?? 1 };
    },
  },
  {
    title: '用途層級(jí)4',
    align: 'center',
    width: 100,
    dataIndex: 'useLevel4',
    customCell: (record, index, column) => {
      return { rowSpan: record.useLevel4Rowspan ?? 1 };
    },
  },
  {
    title: '能源類別',
    align: 'center',
    width: 100,
    dataIndex: 'energyType',
  }
 ]

  import { columns } from './jsfile.data';

  let newTableData = reactive([]);
  // 是否已經(jīng)合并防止重復(fù)監(jiān)聽(tīng)
  let isMerge = ref(false);
  // 需要合并的屬性列
  const needTomergeColumnsIndex = ['useLevel1', 'useLevel2', 'useLevel3', 'useLevel4'];
  // 監(jiān)聽(tīng)表格數(shù)據(jù)
 watch(tableDataSource, async (newTableDataSource) => {
    if (newTableDataSource && newTableDataSource.length > 1 && !isMerge.value) {
      let tableData = newTableDataSource;
      isMerge.value = true;
      // 遍歷需要合并的屬性列
      await needTomergeColumnsIndex.forEach((columnDataIndex) => {
        // 存儲(chǔ)結(jié)果和計(jì)算每個(gè)屬性的出現(xiàn)次數(shù)。
        const dynamicVariables = {};
        // 屬性的Rowspan，分別表示該對(duì)象在需要合并列屬性上的rowspan 值
        const variableName = columnDataIndex + 'Rowspan';
        // 計(jì)算每個(gè)屬性的 rowspan
        tableData.forEach((item, index) => {
          dynamicVariables[variableName] = 0;
          if (tableData[index - 1] && item[columnDataIndex] === tableData[index - 1][columnDataIndex]) {
            dynamicVariables[variableName] = 0;
          } else {
            for (let i = index; i < tableData.length; i++) {
              if (tableData[i][columnDataIndex] === item[columnDataIndex]) {
                dynamicVariables[variableName]++;
              } else {
                break;
              }
            }
          }
          item[variableName] = dynamicVariables[variableName];
        });
        console.log(tableData);
      });
      // 表格賦具有合并屬性的新值
      newTableData = tableData;
    }
  });