VUE3+element plus 实现表格行合并

基础实现方法

通过给el-table传入span-method方法可以实现合并行或列，该方法的参数包含当前行row、当前列column、当前行号rowIndex和当前列号columnIndex四个属性15。该方法可以返回包含rowspan和colspan的数组或对象，例如：

javascriptCopy Code

const spanMethod = ({ row, column, rowIndex, columnIndex }) => { if (columnIndex === 0) { return { rowspan: 4, colspan: 1 } // 合并4行1列 } }

动态合并相同数据行

对于需要根据数据相同性合并的场景，可先预处理数据生成合并映射表5：

1. 遍历数据，记录需要合并的行数和起始位置
2. 在span-method中根据映射表返回合并配置

javascriptCopy Code

const spanPropGroup = (data) => { let rowSpansMap = new Map() // 生成合并映射逻辑... return rowSpansMap }

完整示例代码

1. 使用setup语法糖简化代码结构
2. span-method实现每隔两行合并一次
3. 返回rowspan:0表示隐藏被合并的单元格

复杂合并场景

对于需要根据特定字段值合并的场景（如相同订单号合并），需先预处理数据生成合并规则4。典型实现包括：

1. 遍历数据识别连续相同值
2. 记录合并起始位置和行数
3. 在span-method中应用预处理结果

注意事项

1. 合并行时需确保被合并行数据一致性1
2. 复杂合并建议先对数据进行分组排序
3. 性能优化：大数据量时应减少span-method计算量

《VUE3+element plus 实现表格行合并》 是转载文章，点击查看原文。