效果图如下:
<el-table
:data="tableData"
:span-method="(...arg)=>strategySpanMethod(...arg,tableData)"
border>
<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>
<script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '234',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '小虎',
amount1: '324',
amount2: '4.1',
amount3: 17
}, {
id: '12987126',
name: '虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
};
},
methods: {
// 处理合并行的数据
getSpanArr: function(data, spanKey) {
let spanArr = []
let pos = ''
for (let i = 0; i < data.length; i++) {
if (i === 0) {
spanArr.push(1)
pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i][spanKey] === data[i - 1][spanKey]) {
spanArr[pos] += 1
spanArr.push(0)
} else {
spanArr.push(1)
pos = i
}
}
}
return spanArr
},
// 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
strategySpanMethod: function({ row, column, rowIndex, columnIndex }, data) {
// columnIndex判断第一列或第二列合并 列数从0开始
if(columnIndex == 1 || columnIndex == 2){
// column.property是表头的key
let spanArr = this.getSpanArr(data, column.property)
const _row = spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
}
}
</script>