需求:支持动态合并任意连续相同行
解决:
(1)动态合并行数
①通过 while 循环持续检查后续行,直到发现不同值或数据结尾;
②示例:连续3行相同返回 rowspan:3,后续2行自动隐藏;
(2)智能起始行判断
// 满足以下条件视为合并起始行:
rowIndex === 0 || // 首行
row.engineerSupportType !== previousRow.engineerSupportType // 与前一行不同
const objectSpanMethod = ({row,column,rowIndex,columnIndex,}: SpanMethodProps) => {if (columnIndex === 0) { // 仅处理第一列// 判断是否为连续相同字段的起始行if (rowIndex === 0 || row.engineerSupportType !== ruleData.data[rowIndex - 1].engineerSupportType) {// 计算连续相同行数let mergeCount = 1;let currentIndex = rowIndex;// 循环检查后续所有行while (currentIndex + 1 < ruleData.data.length &&ruleData.data[currentIndex].engineerSupportType === ruleData.data[currentIndex + 1].engineerSupportType) {mergeCount++;currentIndex++;}return {rowspan: mergeCount,colspan: 1};} else {// 非起始行隐藏return {rowspan: 0,colspan: 0};}}};
测试:
// 测试数据
const data = [{ engineerSupportType: 'A' }, // 行0(合并3行){ engineerSupportType: 'A' }, // 行1(隐藏){ engineerSupportType: 'A' }, // 行2(隐藏){ engineerSupportType: 'B' }, // 行3(合并2行){ engineerSupportType: 'B' }, // 行4(隐藏){ engineerSupportType: 'C' } // 行5(合并1行)
];// 输出结果:
行0: rowspan:3
行1: rowspan:0
行2: rowspan:0
行3: rowspan:2
行4: rowspan:0
行5: rowspan:1
注意事项:
(1)数据必须排序
合并字段需要预先排序保证相同值连续:
// 在数据加载时排序
ruleData.data.sort((a, b) => a.engineerSupportType.localeCompare(b.engineerSupportType)
);
(2)大数据量优化
万级数据建议使用预处理方案(参考之前回答):
// 预处理生成合并参数数组
const spanArr = ref<number[]>([]);// 数据变化时重新计算
watch(() => ruleData.data, generateSpanArr, { deep: true });