elementUI table表格動(dòng)態(tài)合并的示例代碼

//合并單元格 二維數(shù)組-> 根據(jù)“標(biāo)識(shí)”去遍歷數(shù)據(jù)
data() {

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

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

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

let data = xxxxxxxxx
this.getSpanArr(data)
}