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

element el-table合并单元格

合并

 表格el-table添加方法:span-method="”

 <el-table v-loading="listLoading" :data="SHlist" ref="tableList" element-loading-text="Loading" border fit   highlight-current-row :header-cell-style="headClass" style="margin-top:15px" :span-method="objectSpanMethod">

 下面是我需求,合并第二列,第五

 //合并单元格
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex,
        index2
      }) {
        if (columnIndex === 4) { //下标是4的那一列
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          console.log(_col, '_col');
          return {
            rowspan: _row, //行
            colspan: _col //列
          };
        }
           if (columnIndex === 1) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          console.log(_col, '_col');
          return {
            rowspan: _row, //行
            colspan: _col //列
          };
        }
        
      
      },

添加方法 

    getSpanArr(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].originalOrder === data[i - 1].originalOrder && data[i].originalOrder) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }

          }
        }
        console.log(this.spanArr, ' this.spanArr');
      },

 getSpanArr2(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].storeName === data[i - 1].storeName && data[i].storeName) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      },

下面是使用,获取倒接口数据后进行数据整合

  this.getSpanArr(this.SHlist);
  this.getSpanArr2(this.SHlist);


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

相关文章:

  • 代码随想录_字符串
  • 美区TikTok解封后如何回归使用?
  • 浅说树上倍增(下)
  • 电脑换固态硬盘
  • 调试Hadoop源代码
  • iOS 性能优化:实战案例分享
  • 机器学习(5):支持向量机
  • CSS 溢出问题及解决方案:实用案例与技巧
  • 在 vscode + cmake + GNU 工具链的基础上配置 JLINK
  • web自动化-登录时滑块验证码报错解决方案
  • MongoDB数据库迁移
  • Linux -- HTTP 请求 与 响应 报文
  • 网络安全等级保护基本要求——等保二级
  • 可以自己部署的微博 Mastodon
  • 【优选算法】4----盛最多水的容器
  • Docker可视化管理工具Portainer
  • GFPGAN - 腾讯开源的图形修复算法修复算法
  • 网络爬虫技术如何影响网络安全的
  • .NET Framework 4.5.1 离线安装包
  • DM8 SQL 错误 [22000]: 锁超时
  • Objective-C语言的函数实现
  • 深入探究 Java 异常处理
  • 探索微服务架构:从单体应用到微服务的转变
  • Netty的handler类无法进行spring的注入service等操作,注入为null情况
  • 将 AzureBlob 的日志通过 Azure Event Hubs 发给 Elasticsearch(1.标准版)
  • FPGA开发中的团队协作:构建高效协同的关键路径