html代码如下:
<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>
js代码如下:
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987124',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎1',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
spanArr: []
}
},
mounted() {
this.rowspan();
},
methods: {
rowspan() {
//每次调用清空数据
this.spanArr = [];
this.position = 0
this.tableData.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
this.position = 0;
} else {
// id 为需要合并查询的项
if (this.tableData[index].id === this.tableData[index - 1].id) {
this.spanArr[this.position] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.position = index;
}
}
})
},
//合并
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) { //表格合并行
// 添加合并行判断
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
}
}
修改objectSpanMethod下的columnIndex 判断,可以指定列来进行合并
ps:数据需要将需要处理的那一列进行排序,相同的放在一起