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

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

先放几个表格的图看看

表格一:
预览:https://jsfiddle.net/xmwh/2vh…
《记录element ui table表格spanMethod动态合并列》

表格二:
预览:https://jsfiddle.net/xmwh/s4g…
《记录element ui table表格spanMethod动态合并列》

表格三:
预览:https://jsfiddle.net/xmwh/vxL…
《记录element ui table表格spanMethod动态合并列》

语言有点不太好描述,大家还是看图吧,看图也能大概知道需要合并哪些,这些数据中指标、原材料名称格式都是不一定的,所以合并起来有点困难,不同的列合并的个数也还不一样,之前也提问过,不过没人回答,只好自己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
        }
    }
}

具体使用,请参考上面的预览地址!

    原文作者:寻梦无痕
    原文地址: https://segmentfault.com/a/1190000017435740
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞