ant-design-vue 表格动态合并单元格

table.ts

function dynamicMergeCells(dataSource: [], index: number, key: string) {
    const data = dataSource.map((item) => item[key]);

    const result = [] as any;
    let count = 1;

    for (let i = 1; i < data.length; i++) {
      if (data[i] == data[i - 1]) {
        count++;
        result.push({
          value: data[i - 1],
          start: i,
          colSpan: 0,
          rowSpan: 1,
        });
      } else {
        result.push({
          value: data[i - 1],
          start: i - count,
          rowSpan: count,
          colSpan: 1,
        });

        count = 1;
      }
    }

    // 处理最后一个元素
    result.push({
      value: data[data.length - 1],
      start: data.length - count,
      rowSpan: count,
      colSpan: 1,
    });

    const mergedData = result.sort((a, b) => {
      return a.start - b.start;
    });

    if (mergedData[index] && index === mergedData[index].start) {
      return { rowSpan: mergedData[index].rowSpan, colSpan: mergedData[index].colSpan };
    } else {
      return { rowSpan: 1, colSpan: 1 };
    }
  }
      
    //使用
   {
      title: '状态',
      dataIndex: 'status',
      customCell: (_, index) => {
        const dataSource = getDataSource();
        return dynamicMergeCells(dataSource, index, 'status');
      },
    }