vue+element 的单列表格合并

最新推荐文章于 2025-03-07 14:36:16 发布

皮皮虾-coding

最新推荐文章于 2025-03-07 14:36:16 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签：合并表格 element

本文链接：https://blog.youkuaiyun.com/qq_41612675/article/details/86487842

版权

vue 专栏收录该内容

19 篇文章

订阅专栏

本文分享了在使用 Element UI 的 el-table 组件时，如何通过 span-method 方法实现表格数据的有效合并，解决了项目中遇到的实际问题。文章详细介绍了 mountedTable 方法的使用，以及如何对数据进行排序以确保正确合并。

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

前一段时间做项目的时候遇到了这个问题。用element文档里的试了，不可行。
最后百度后找到办法，果然还是广大网友和百度厉害。
效果如下：
在这里插入图片描述
代码如下：

<el-table :data="allTruckLossData" :span-method="objectSpanMethod" border style="width: 100%;" class="detailTable">
<!--表格内容-->
</el-table>

:span-method 是方法。

    // 表格合并 :span-method
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 第一列的合并处理
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 合并处理 相同车辆合并属性
    mountedTable() {
      let contactDot = 0
      this.allTruckLossData.forEach((item, index) => {
        item.index = index
        if (index === 0) {
          this.spanArr.push(1)
        } else {
          // 后一个和前一个相比，相同的存入同一个index,不同的存入index++，**有顺序要求，所以要先排序**
          if (item.id=== this.allTruckLossData[index - 1].id) {
            this.spanArr[contactDot] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            contactDot = index
          }
        }
      })
    },

就在这里：mountedTable() 这个方法使用之后如果存在没有合并在一起的行，那就要对你在表格中绑定的数据进行排序处理。