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 }

完整示例代码

<template>
<el-table :data="tableData" :span-method="objectSpanMethod">
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="amount" label="金额" />
</el-table>
</template>

<script setup>
import { ref } from 'vue'

const tableData = ref([
{ id: '1', name: '王小虎', amount: '100' },
{ id: '1', name: '王小虎', amount: '200' },
{ id: '2', name: '张三', amount: '300' },
{ id: '2', name: '张三', amount: '400' }
])

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return { rowspan: 2, colspan: 1 }
} else {
return { rowspan: 0, colspan: 0 }
}
}
}
</script>

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

复杂合并场景

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

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

注意事项

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