说明：本篇采用2.12版本，在官方文档上面分别提供了行或列的合并，整合起来后根据个人或项目不同的需求，整合起来的合并效果会不相同，这里只进行举例。
文末说明示例弊端和本篇示例可调控范围
<template>
<div>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
prop="addr"
label="地址">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="nameA"
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>
</div>
</template>
<script>
export default {
name: "newTbTest",
data() {
return {
tableData: [{
addr: ‘成都‘,
name: ‘王小虎1‘,
nameA: ‘王小虎1‘,
amount1: ‘234‘,
amount2: ‘3.2‘,
amount3: 10,
id: ‘12987122‘
}, {
addr: ‘成都‘,
name: ‘王小虎2‘,
nameA: ‘王小虎2‘,
amount1: ‘165‘,
amount2: ‘4.43‘,
amount3: 12,
id: ‘12987122‘
}, {
addr: ‘长沙‘,
name: ‘王小虎3‘,
nameA: ‘王小虎3‘,
amount1: ‘324‘,
amount2: ‘1.9‘,
amount3: 9,
id: ‘12987122‘
}, {
addr: ‘长沙‘,
name: ‘王小虎4‘,
nameA: ‘王小虎5‘,
amount1: ‘621‘,
amount2: ‘2.2‘,
amount3: 17,
id: ‘12987122‘
}, {
addr: ‘长沙‘,
name: ‘王小虎4‘,
nameA: ‘王小虎6‘,
amount1: ‘539‘,
amount2: ‘4.1‘,
amount3: 15,
id: ‘12987122‘
}]
};
},
methods: {
// ele自定义方案
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 合并行列产品名字相同合并（计算组长度以内的列，需要进行合并操作的列）
let mergeLength = 3;//需要进行横纵合并的列
if (columnIndex < mergeLength) {
let finArray = [1,1];
// 处理行数据
let cgname = Object.keys(row)[columnIndex]
if(rowIndex === 0 || row[cgname] !== this.tableData[rowIndex-1][cgname]){
let rowspan = 1;
//计算需要进行合并操作的行
for(let i=0; i<this.tableData.length-1; i++){
// 只合并连续的
if(this.tableData[i][cgname] === row[cgname] && this.tableData[i+1][cgname] === row[cgname]){
rowspan ++;
}
}
finArray[0] = rowspan;
}else {
finArray[0] = 0;
}
// 处理列数据
let colkeys = Object.keys(row);
let cgvalue = Object.values(row)[columnIndex]
if(columnIndex ===0 || row[colkeys[columnIndex-1]] !== row[colkeys[columnIndex]]){
let colspan = 1;
//计算需要进行合并操作的列
for(let i=columnIndex; i<mergeLength; i++) {
// 只合并连续的
if (row[colkeys[i]]===cgvalue && row[colkeys[i+1]]===cgvalue && i+1<mergeLength) {
colspan ++;
}
}
finArray[1] = colspan;
} else {
finArray[1] = 0;
}
return finArray
}
}
},
mounted(){
}
}
</script>
<style scoped>
</style>
示例弊端：1.同官方一样，合并行之后，就没有在使用排序会渲染导致问题。2.示例控制了合并的列数和连续条件合并，所以tabaData数据列项顺序必须同表头名字顺序一致。3.示例同官方一致采用的简单的值合并，值相同就会进行合并计算，受2条件约束后不会出现前后跨行或跨列名字相同统计错乱问题。
可调范围：1.连续合并或指定条件合并，根据tabaData数据构成调控。2.可以根据id或其他特殊标识符进行合并，根据tabaData数据构成调控。3.增加合并规则和唯一判断条件后tabaData数据可以不同表头名顺序一致（非连续合并）。
原文：https://www.cnblogs.com/zhaozhou/p/13432077.html