先放几个表格的图看看
表格一：预览：https://jsfiddle.net/xmwh/2vh…
表格二：预览：https://jsfiddle.net/xmwh/s4g…
表格三：预览：https://jsfiddle.net/xmwh/vxL…
语言有点不太好描述，大家还是看图吧，看图也能大概知道需要合并哪些，这些数据中指标、原材料名称格式都是不一定的，所以合并起来有点困难，不同的列合并的个数也还不一样，之前也提问过，不过没人回答，只好自己 google 搜索了，找到了该篇文章 https://blog.csdn.net/qq_2946…，本文内容实现方法都是参照这个来的。
经过改造后可以多列不同行进行动态合并，核心代码如下：
getSpanArr(tableData, keyName) {
keyName.forEach((kitem, k) =>{
tableData.forEach((data, i) =>{
if (i === 0) {
this.mergeData[kitem] = this.mergeData[kitem] || []
this.mergeData[kitem].push(1)
this.mergePos[kitem] = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[kitem] === tableData[i – 1][kitem]) {
this.mergeData[kitem][this.mergePos[kitem]] += 1
this.mergeData[kitem].push(0)
} else {
this.mergeData[kitem].push(1)
this.mergePos[kitem] = i
}
}
})
})
console.log(this.mergeData)
console.log(this.mergePos)
}
然后利用 element table 提供的 spanMethod 方法进行表格合并操作
spanMethod({row, column, rowIndex, columnIndex}){
if (this.mergeProp.includes(column.property)) {
const _row = this.mergeData[column.property + ‘Id’][rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
具体使用，请参考上面的预览地址！