此方法适用于表格中有多个相同列需要合并的情况!
核心函数:
/*
@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];
}
});
});