例如此图所示
需求：相同的内容合并，指定一些列不合并。
```<template>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1（元）">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2（元）">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3（元）">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987122',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987125',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
cellList: [], // 单元格数组
count: 0, // 计数
cellMergeShow:['amount1','amount2','amount3']//不需要合并的列
};
},
created(){
// 实际生产环境这个环节放到请求列表接口中
//生产环境请求列表时需重置cellList和count的值
this.computeCell(this.tableData)
},
methods: {
computeCell(table) {
// 循环遍历表体数据
table.forEach((item,index) => {
if(index==0){
// 列表首项向下合并的行数 初始化赋值 1
this.cellList.push(1)
// 初始化赋值 0
this.count=0
}else{
// id,name 表示指定相同条件合并
if((item.id==table[index-1].id)&&(item.name==table[index-1].name)){
// 后续列表向下合并行数自增 1
this.cellList[this.count]++
// 合并行数后面追加 0，为0则消失，让合并的行延申
this.cellList.push(0);
}else{
// 后续列表不相同则重新计数
this.cellList.push(1)
// 标记当前计数的下标
this.count=index
}
}
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }){
if(this.cellMergeShow.includes(column.property)){
return {
rowspan: 1,//向下合并行
colspan: 1//由于需求不需要向右合并列，所以指定为1，为0则消失
};
}else{
return {
rowspan: this.cellList[rowIndex],//向下合并行
colspan: 1//向右合并列
};
}
}
},
};
</script>
`
