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数据结构如下

相关推荐
右耳朵猫AI4 分钟前
Web前端周刊2026W37 | Shopify 转原生、React 编译 Rust 化、Vitest 5.0、Rslib 1.0
前端·javascript·react.js·typescript·node.js
雪芽蓝域zzs1 小时前
第四十八节:驾驶舱大屏进阶:数字滚动动画 + 渐变边框美化
前端·javascript·vue.js
Bingo_BIG1 小时前
LOV列表的查询
前端·javascript·lov
小静AI工程实验室2 小时前
JS 逆向接口 ID 变了?Python 与 Node.js 复现 JSON 大整数精度丢失
javascript·python·node.js
QQ_21696290962 小时前
基于SpringBoot+Vue的小生活平台的设计与实现
java·数据库·vue.js·spring boot·spring·微信小程序·生活
刘发财10 小时前
前端2秒生成500页矢量PDF,rust真的强到没朋友
前端·javascript·rust
梦想平凡11 小时前
百游棋牌源代码开发搭建教程(十):隔离部署、备份恢复与双端验收
java·前端·javascript·数据库·源代码管理
kyriewen14 小时前
我花3天抓了一个幽灵bug,凶手藏在第4层
前端·javascript·程序员
Bs_MoneyMagnet15 小时前
基于springboot+vue的生态果园采摘预约系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·毕业设计·计算机毕业设计
mONESY16 小时前
LangGraph.js 从零上手:把 Agent 工作流从一条线变成一张网
javascript