当前位置: 首页 > article >正文

vue中el-table合并单元格

1.在el-table中添加 :span-method=“handdelSpanMethod”
2.handdelSpanMethod方法

 //历史单特殊计量合并企业名称相同的第一列
      handdelSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 2) { // 企业名称相同时,合并第一列
          const prevRow = this.specilHislList[rowIndex - 1];
          if (prevRow && row.userName === prevRow.userName) {
            return {
              rowspan: 0,
              colspan: 1
            };
          } else {
            let rowspan = 1;
            for (let i = rowIndex + 1; i < this.specilHislList.length; i++) {
              if (this.specilHislList[i].userName === row.userName) {
                rowspan++;
              } else {
                break;
              }
            }
            return {
              rowspan,
              colspan: 1
            };
          }
        }
  
     /*****当mergeId为空时不合并******/
      if (columnIndex === 17) { // 合并第17列,即合计列
          const mergeId = row.mergeId;
          if (mergeId === null) {
            // 如果 mergeId 为 null,返回 1,表示不合并
            return [1, 1];
          }

          // 判断当前行和上一行的 mergeId 是否相同
          const prevRow = this.specilTotallList[rowIndex - 1];
          if (prevRow && prevRow.mergeId === mergeId) {
            // 如果上一行 mergeId 与当前行相同,则合并单元格,返回 [0, 0] 表示合并
            return [0, 0];
          } else {
            // 否则,不合并,返回 [1, 1] 表示当前单元格占用一行一列
            let rowspan = 1;
            // 向下查找连续相同 mergeId 的行数
            for (let i = rowIndex + 1; i < this.specilTotallList.length; i++) {
              if (this.specilTotallList[i].mergeId === mergeId) {
                rowspan++;
              } else {
                break;
              }
            }
            return [rowspan, 1];  // 设置 rowspan
          }
        }

        // 其他列不做处理,返回默认值
        return [1, 1];
      },
      },

http://www.kler.cn/a/410086.html

相关文章:

  • 鱼眼相机模型-MEI
  • 如何用通义灵码快速绘制流程图?
  • (三)手势识别——动作识别应用【代码+数据集+python环境(免安装)+GUI系统】
  • 基于预测反馈的情感分析情境学习
  • 深度学习模型入门与实践:从零开始理解 AI 的核心
  • Apollo9.0源码部署(Nvidia显卡)
  • 【论文解析】HAQ: Hardware-Aware Automated Quantization With Mixed Precision
  • 深入解析常见的设计模式
  • 三种蓝牙架构实现方案
  • python基础练习
  • ThingsBoard安装测试
  • 学习python的第十三天之函数——函数传参中的传值和传址问题
  • 基于FPGA的2FSK调制-串口收发-带tb仿真文件-实际上板验证成功
  • 网络常见命令
  • 美妆连锁新纪元:多门店电商系统如何重塑美妆产业新生态
  • 如何在 UniApp 中实现 iOS 版本更新检测
  • go-rod vs Selenium:自动化测试工具的比较与选择
  • STM32C011开发(1)----开发板测试
  • 人名分类器(nlp)
  • 44.扫雷第二部分、放置随机的雷,扫雷,炸死或成功 C语言
  • C++11(上)
  • DockerFile 构建基础镜像
  • 泷羽sec-linux
  • 【QT项目】基于C++的数据链路层帧封装实验(CRC校验算法实现)
  • Java基础1.0
  • Paddle Inference部署推理(五)