Antd-Vue中Table组件实现相同内容列合并

此方法适用于表格中有多个相同列需要合并的情况！

核心函数：

/*
 @param {Object} record 当前行数据
 @param {number} index 当前行数据在当前分页数据中的下标
 @param {string} dataIndex 表格columns中设置的dataIndex属性
 @param {string} rowSpanName 表格columns中设置的rowSpanName名称
 @returns {Object} 某列需要的RowSpan数量对象
 */
const genCustomRow = (
  record: Record<string, any>,
  index: number,
  dataIndex: string,
  rowSpanName: string
) => {
  const pageStart = (pagination.current - 1) * pagination.pageSize;
  const pageEnd = pageStart + pagination.pageSize;
  // currentData 为当前分页数据
  const currentData = copyList.value.slice(pageStart, pageEnd);
  // currentIndex指针记录当前位置
  let currentIndex = 0;
  // rowSpanNum用于设置某列的rowSpan数据
  let rowSpanNum = 0;
  currentData.forEach((d, i) => {
  // 先判断下一位是否有数据，再对前后数据进行比较
    if (currentData[i + 1] && d[dataIndex] === currentData[i + 1][dataIndex]) {
      ++rowSpanNum;
    } else {
      // +1的原因是，如果有两行的某个数据相同，由于前指针的缘故，rowSpanNum只会加到1，而需要的数据为2
      currentData[currentIndex][rowSpanName] = rowSpanNum + 1;
      // 原因同上
      currentIndex = i + 1;
      // 归零，再次计算下一个重复数据
      rowSpanNum = 0;
    }
  });
  // 当前数据
  const currentRow = currentData[i];
  return { rowSpan: currentRow?.[rowSpanName] || 0 };
};

使用方式：

const columns = [
      {
        title: "名称",
        dataIndex: "name",
        customCell: (record, index) => {
          return genCustomRow(record, index,"name", "nameRowSpan");
        },
      },
      //...other columns
      // 如果有其他列需要合并，只需要修改genCustomRow函数中第三和第四个参数
    ]

注意：

一定要在Table组件的@change事件中，清除数据中所有的rowSpan数据：

const deleteRowSpanNames = ['nameRowSpan', 'ageRowSpan'];

dataSource.value.forEach(i => {
  deleteRowSpanNames.forEach(p => {
    if (p in i) {
      delete i[p];
    }
  });
});