elementUI table表格動態合并的示例代碼

//合并單元格 二維數組-> 根據“標識”去遍歷數據
data() {

return {
 spanArr: [], //遍歷數據時，根據相同的標識去存儲記錄
 pos: 0 // 二維數組的索引
}
}
// methods中定義方法
getSpanArr(data) {

let that = this
//頁面展示的數據，不一定是全部的數據，所以每次都清空之前存儲的 保證遍歷的數據是最新的數據。以免造成數據渲染混亂
that.spanArr = []
that.pos = 0
//遍歷數據
data.forEach((item, index) => {
 //判斷是否是第一項
 if (index === 0) {
 this.spanArr.push(1)
 this.pos = 0
 } else {
 //不是第一項時，就根據標識去存儲
 if (data[index].moldName === data[index - 1].moldName) {
 // 查找到符合條件的數據時每次要把之前存儲的數據+1
 this.spanArr[this.pos] += 1
 this.spanArr.push(0)
 } else {
 // 沒有符合的數據時，要記住當前的index
 this.spanArr.push(1)
 this.pos = index
 }
 }
 })
console.log(this.spanArr, this.pos)
},
// 列表方法
objectSpanMethod({rowIndex, columnIndex}) {

// 頁面列表上 表格合并行 -> 第幾列(從0開始)
// 需要合并多個單元格時 依次增加判斷條件即可
if (columnIndex === 3) {
 // 二維數組存儲的數據 取出
 const _row = this.spanArr[rowIndex]
 const _col = _row > 0 ? 1 : 0
 return {
 rowspan: _row,
 colspan: _col
 }
 //不可以return {rowspan：0， colspan: 0} 會造成數據不渲染， 也可以不寫else，eslint過不了的話就返回false
} else {
 return false
}
}
created（） {

let data = xxxxxxxxx
this.getSpanArr(data)
}