element table 合并列相同数据

最新推荐文章于 2025-03-18 17:05:05 发布

妖心changeless

最新推荐文章于 2025-03-18 17:05:05 发布

阅读量587

点赞数

分类专栏： element

本文链接：https://blog.youkuaiyun.com/TheSpiritIsHeart/article/details/115125538

版权

element 专栏收录该内容

31 篇文章

订阅专栏

这篇博客介绍了如何在HTML表格中使用JavaScript进行单元格合并。通过`objectSpanMethod`方法，动态计算并设置`rowspan`和`colspan`属性，实现了根据数据模型名(modelName)进行连续行合并的功能。在`mounted`阶段调用`tableDatas`方法初始化数据，确保表格正确显示合并效果。

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

在这里插入图片描述
table 添加方法

:span-method="objectSpanMethod"

JS 方法

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 4) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },

合并（在mounted方法中调用this.tableDatas()）

 tableDatas() {
      let contactDot = 0
      this.spanArr = []
      this.tableData.forEach((item, index) => {
        item.index = index
        if (index === 0) {
          this.spanArr.push(1)
          contactDot = 0
        } else {
          if (item.modelName === this.tableData[index - 1].modelName) {
          // modelName 是绑定的字段名 
            this.spanArr[contactDot] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            contactDot = index
          }
        }
      })
    },