export 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 };
}
}
//table column
{
title: 'xxxxx',
dataIndex: 'key',
width: 100,
customCell: (_, index) => {
const dataSource = getDataSource();
return dynamicMergeCells(dataSource, index, 'key');
},
},
vben or ant design vue table 根据数据动态合并单元格
于 2023-07-25 16:30:01 首次发布