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,        // 不进行跨列
            }
        }
    },
相关推荐
不简说32 分钟前
JS 代码技巧 vol.5 — 10 个错误处理套路,从 try/catch 到 Error Boundary
前端·javascript·程序员
wordpress资料库35 分钟前
Next.js更适合移动开发 不适合web开发
开发语言·前端·javascript·next.js
卷无止境44 分钟前
Quarkdown:赋予 Markdown 超能力的现代排版系统
前端·markdown
BerryS3N1 小时前
C++23新特性在CLion中的实战体验:从语法糖到生产力提升
前端·c++23
李明卫杭州2 小时前
Vue 3 `markRaw` 详解:什么时候该让一个对象"别被代理"
vue.js
申君健24864182772022 小时前
# WebGPU 的渲染原理与 Shader
前端
用户83134859306982 小时前
Vue+Threejs实现人物奔跑场景
vue.js·webgl·three.js
随风123weber2 小时前
从前端响应式到后端背压:深度拆解生成式 UI(Generative UI)
前端
用户059540174462 小时前
用 Pytest 接管大模型记忆存储测试,状态一致性问题减少 90%
前端·css
IT_陈寒2 小时前
JavaScript的异步地狱里,我的Promise掉进了微任务陷阱
前端·人工智能·后端