官网解释：通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
这个显然不能满足项目开发需求，所以需要略作修改！
如下图，类似这样的合并应该才是工作中项目需要的：
实现方式（直接上代码）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>element-table</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<div>
<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="姓名"
width="180">
</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>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
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: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
mergeSpanArr: [], // 空数组，记录每一行的合并数
mergeSpanArrIndex: '' // mergeSpanArr的索引
}
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 设置需要合并的列（索引）
if (rowIndex % 2 === 0) { // 设置合并多少行
return {
rowspan: 2, // 需要合并的行数
colspan: 1 // 需要合并的列数，设置为0，不显示该列
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex === 1) { // 合并第二列所有行
const _row = this.mergeSpanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
// 生成一个与行数相同的数组，记录每一行设置的合并数
setMergeArr (data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.mergeSpanArr.push(1);
this.mergeSpanArrIndex = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].name === data[i - 1].name) {
this.mergeSpanArr[this.mergeSpanArrIndex] += 1;
this.mergeSpanArr.push(0);
} else {
this.mergeSpanArr.push(1);
this.mergeSpanArrIndex = i;
}
}
}
// 如果第一条记录索引为0，向数组中push 1，设置索引值
// 如果不是第一条记录，判断与前一条记录是否相等，相等则向mergeSpanArr添加元素0
// 且将前一条记录+1，即需要合并的行数+1，直到得到所有需要合并的行数
}
},
mounted () {
this.setMergeArr(this.tableData)
}
})
</script>
</body>
</html>
