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

最新推荐文章于 2025-05-21 10:40:20 发布

转载最新推荐文章于 2025-05-21 10:40:20 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017435740

文章标签：

#ui #javascript #前端 #ViewUI

本文介绍了一种使用ElementTable的spanMethod方法实现动态表格合并的方法，通过遍历表格数据，比较前后行元素，实现多列不同行的动态合并，解决了指标、原材料名称格式不确定导致的合并难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放几个表格的图看看

表格一：
预览：https://jsfiddle.net/xmwh/2vh...
element ui table表格动态合并多列

表格二：
预览：https://jsfiddle.net/xmwh/s4g...
element ui table表格动态合并多列

表格三：
预览：https://jsfiddle.net/xmwh/vxL...
element ui table表格动态合并多列

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

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