el-table :span-method合并单元格

复制代码
          <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%" :height="300">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="projectType" align="center" width="120" label="指标分类"></el-table-column>
            <el-table-column prop="project" align="center" width="120" label="指标项目"></el-table-column>
            <el-table-column prop="indicator" align="center" label="标准分"></el-table-column>
            <el-table-column prop="score" align="center" label="得分数"></el-table-column>
          </el-table>
javascript 复制代码
data() {
    return {
        tableData: [],
        merge: [], // 存放需要合并的行
        subscript: '' // 需要合并行下标
    }
}

methods: {
    // 拿到数据
    getTableList() {
      this.$request({ url: '/fault/CmRaterecordService/factoryStationRat', method: 'get', params: this.queryParams }).then(res => {
        console.log(res)
        if (res?.data?.length) {
          this.tableData = res.data
          this.getMergeSubSceipt(res.data)
        }
      })
    },


    // 根据字段projectType做合并区分处理,具体看接口的区分字段
    getMergeSubSceipt(data) {
      if (data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.merge.push(1)
            this.subscript = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            // 根据相同id进行合并,根据需要可进行修改
            if (data[i].projectType === data[i - 1].projectType) {
              this.merge[this.subscript] += 1
              this.merge.push(0)
            } else {
              this.merge.push(1)
              this.subscript = i
            }
          }
        }
      }
    },
    
    // 合并处理
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const _row = this.merge[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
}

效果:

附:通过接口获取的tableData数据结构如下

相关推荐
小二·13 分钟前
【万字源码级剖析】深入理解 Vue 3 响应式系统:ref、reactive、computed 与 effect 的底层实现
前端·javascript·vue.js
且菜且折腾33 分钟前
react快捷键hook
javascript·react.js·ecmascript
一路向前的月光40 分钟前
前端采用electron-hiprint控件实现静默打印
前端·javascript·electron
vx_bisheyuange1 小时前
基于SpringBoot的青年公寓服务平台
前端·vue.js·spring boot·毕业设计
奶糖 肥晨2 小时前
JS自动检测用户国家并显示电话前缀教程|vue uniapp react可用
javascript·vue.js·uni-app
啊花是条龙2 小时前
《产品经理说“Tool 分组要一条会渐变的彩虹轴,还要能 zoom!”——我 3 步把它拆成 1024 个像素》
前端·javascript·echarts
青茶3602 小时前
【js教程】如何用jq的js方法获取url链接上的参数值?
开发语言·前端·javascript
文艺理科生3 小时前
Google A2UI 解读:当 AI 不再只是陪聊,而是开始画界面
前端·vue.js·人工智能
晴栀ay3 小时前
React性能优化三剑客:useMemo、memo与useCallback
前端·javascript·react.js
知其然亦知其所以然3 小时前
别再死记硬背了,一篇文章搞懂 JS 乘性操作符
前端·javascript·程序员