记录element ui table表格spanMethod动态合并列

New：更简洁的写法参考： 点击前往

先放几个表格的图看看

表格一：
预览：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
        }
    }
}

具体使用，请参考上面的预览地址！