成都网站制作报价搜索引擎优化入门

需求：支持动态合并任意连续相同行
解决：
（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 });