el-table动态合并列

需要合并列,并且不确定需要合并多少列的,可以参照如下代码

首先需要再el-table上传入span-method方法

复制代码
    arraySpan({ row, column, rowIndex, columnIndex }){
        if (row.groupName == '汇总' && columnIndex == '0') {
            return [0,0]
        } else if (row.groupName == '汇总' && columnIndex == '1') {
            return [1,2]
        }  // 这四行是我用来让最后一行的前两列合并的
        // 下面的代码是用来合并列的,合并不确定多少列要合并的列
        if (columnIndex == '0' && this.dielectricVal != '0') {
            // 判断当前行与上一行的mediumId是否相同
            if (rowIndex > 0 && row.mediumId === this.tableList[rowIndex - 1].mediumId) {
              return {
                rowspan: 0,  // 与上一行相同的mediumId,设置跨行数为0,即不显示
                colspan: 1,  // 不进行跨列
              };
            }
            // 查找后续行是否与当前行的mediumId相同
            let rowspan = 1;
            for (let i = rowIndex + 1; i < this.tableList.length; i++) {
              if (this.tableList[i].mediumId === row.mediumId) {
                rowspan++;
              } else {
                break;
              }
            }
            return {
              rowspan: rowspan,  // 跨行数为相同mediumId的行数
              colspan: 1,        // 不进行跨列
            }
        }
    },
相关推荐
Lovely Ruby11 分钟前
前端er Go-Frame 的学习笔记:实现 to-do 功能(三),用 docker 封装成镜像,并且同时启动前后端数据库服务
前端·学习·golang
老华带你飞12 分钟前
健身房|基于springboot + vue健身房管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
JIngJaneIL17 分钟前
基于Java酒店预约系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
深红19 分钟前
玩转小程序AR-实战篇
前端·微信小程序·webvr
银空飞羽19 分钟前
让Trae SOLO全自主学习开发近期爆出的React RCE漏洞靶场并自主利用验证(CVE-2025-55182)
前端·人工智能·安全
钮钴禄·爱因斯晨30 分钟前
DevUI 组件生态与 MateChat 智能应用:企业级前端智能化实战
前端
不会写DN1 小时前
存储管理在开发中有哪些应用?
前端·后端
清风细雨_林木木1 小时前
Obsidian 笔试环境配置与使用指南
前端
用户47949283569152 小时前
Vite8来啦,告别 esbuild + Rollup,Vite 8 统一用 Rolldown 了
前端·javascript·vite