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,        // 不进行跨列
            }
        }
    },
相关推荐
凌览14 分钟前
一键去水印|5 款免费小红书解析工具推荐
前端·javascript·后端
lichong95118 分钟前
鸿蒙 web组件开发
前端·typescript
1024小神18 分钟前
在html中使用js动态交换两个元素的位置
前端
鹿鹿鹿鹿isNotDefined19 分钟前
逐步手写,实现符合 Promise A+ 规范的 Promise
前端·javascript·算法
一千柯橘19 分钟前
Electron - IPC 解决主进程和渲染进程之间的通信
前端
申阳20 分钟前
Day 16:02. 基于 Tauri 2.0 开发后台管理系统-项目初始化配置
前端·后端·程序员
老前端的功夫22 分钟前
HTTP 协议演进深度解析:从 1.0 到 2.0 的性能革命
前端·网络·网络协议·http·前端框架
拉不动的猪26 分钟前
前端三大权限场景全解析:设计、实现、存储与企业级实践
前端·javascript·面试
wordbaby1 小时前
Flutter Form Builder 完全指南:告别 Controller 地狱
前端·flutter
A***07171 小时前
React数据可视化应用
前端·react.js·信息可视化