elementui el-table用span-method方法对相同的列名或行名进行合并

看到的一篇文章

同理

如果对第二列进行合并的话copy一下第一个方法,让值赋给第二个数组就可以

java 复制代码
 // 合并方法
    mergeCells({ row, column , rowIndex, columnIndex }) {
      debugger;
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(_col, '_col');
        return {
          rowspan: _row, //行
          colspan: _col //列
        };
      }else if (columnIndex ===2){
        const _row = this.spanSecondArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(_col, '_col');
        return {
          rowspan: _row, //行
          colspan: _col //列
        };
      }
    },
    getSpanFirstArr(data) {
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].orgName === data[i - 1].orgName && data[i].orgName) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    // 对类型的合并
    getSpanSecondArr(data) {
      this.spanSecondArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanSecondArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].wgareaType === data[i - 1].wgareaType && data[i].wgareaType) {
            this.spanSecondArr[this.pos] += 1;
            this.spanSecondArr.push(0);
          } else {
            this.spanSecondArr.push(1);
            this.pos = i;
          }
        }
      }
    },```
相关推荐
写不来代码的草莓熊38 分钟前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
JinSo1 小时前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌1 小时前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero1 小时前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰1 小时前
eduAi-智能体创意平台
前端·vue.js
golang学习记1 小时前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴1 小时前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw1 小时前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物2 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js
菜鸟‍2 小时前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js