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,        // 不进行跨列
            }
        }
    },
相关推荐
HIT_Weston12 分钟前
47、【Ubuntu】【Gitlab】拉出内网 Web 服务:Nginx 事件驱动分析(一)
前端·ubuntu·gitlab
开发者小天31 分钟前
React中的 闭包陷阱
前端·javascript·react.js
翔云 OCR API36 分钟前
承兑汇票识别接口技术解析-开发者接口
开发语言·前端·数据库·人工智能·ocr
涔溪44 分钟前
Vue3 的核心语法
前端·vue.js·typescript
G***E3161 小时前
前端在移动端中的React Native Web
前端·react native·react.js
云烟飘渺o1 小时前
JPA 的脏检查:一次“没 save() 却更新了”的排查记录
前端
Neptune11 小时前
深入浅出:理解js的‘万物皆对象’与原型链
前端·javascript
王霸天1 小时前
扒一扒 Vue3 大屏适配插件 vfit 的源码:原来这么简单?
前端
王霸天2 小时前
拒绝 rem 计算!Vue3 大屏适配,我是这样做的 (vfit 使用体验)
前端
xinyu_Jina2 小时前
ikTok Watermark Remover:客户端指纹、行为建模与自动化逆向工程
前端·人工智能·程序人生·信息可视化