elementui表格列居中-Record element ui table table span方法动态合并列

我们先来看看一些桌子的图片。

表格1：

预览：

表格2：

预览：

表格3：

预览：

语言有点难以描述，还是看图吧。 看图就可以大概明白需要合并什么了。 这些数据中的指标和原材料名称的格式都不确定，所以合并起来有点困难。 不同的列要合并的数量是不一样的。 我以前问过这个问题elementui表格列居中elementui表格列居中，但没有人回答。 我不得不在谷歌上搜索并找到了这篇文章。 本文的内容就是基于此实现的。

改造后，可以动态合并多列、不同行。 核心代码如下：

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
        }
    }
}

具体使用方法请参考之前的预览地址！