element ui table 动态合并单元格

最新推荐文章于 2023-08-04 16:36:38 发布

光华♏

最新推荐文章于 2023-08-04 16:36:38 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： js vue

本文链接：https://blog.youkuaiyun.com/fire_f_f/article/details/109383518

js 同时被 2 个专栏收录

9 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现的表格数据展示方法，通过自定义的`reArr`函数处理数据，实现对相同`projectId`的数据进行跨行合并，并通过`objectSpanMethod`方法设置合并的行列范围。

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

<el-table
        :data="tableData"
        border
        stripe
        size="small"
        ref="spantable"
        :span-method="objectSpanMethod"
        :max-height="tableHeight"
        v-loading="loading"
        @row-dblclick="handledbrow"
      > 
reArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同,
          if (data[i].projectId === data[i - 1].projectId) {
            this.spanArr[this.pos] += 1

            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)

            this.pos = i
          }
        }
      }
    }

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