前一段时间做项目的时候遇到了这个问题。用element文档里的试了,不可行。
最后百度后找到办法,果然还是广大网友和百度厉害。
效果如下:
代码如下:
<el-table :data="allTruckLossData" :span-method="objectSpanMethod" border style="width: 100%;" class="detailTable">
<!--表格内容-->
</el-table>
:span-method 是方法。
// 表格合并 :span-method
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 第一列的合并处理
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
// 合并处理 相同车辆合并属性
mountedTable() {
let contactDot = 0
this.allTruckLossData.forEach((item, index) => {
item.index = index
if (index === 0) {
this.spanArr.push(1)
} else {
// 后一个和前一个相比,相同的存入同一个index,不同的存入index++,**有顺序要求,所以要先排序**
if (item.id=== this.allTruckLossData[index - 1].id) {
this.spanArr[contactDot] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
contactDot = index
}
}
})
},
就在这里:mountedTable() 这个方法使用之后如果存在没有合并在一起的行,那就要对你在表格中绑定的数据进行排序处理。