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);
相关推荐
匹马夕阳11 分钟前
ECharts极简入门
前端·信息可视化·echarts
bug总结16 分钟前
新学一个JavaScript 的 classList API
开发语言·javascript·ecmascript
网络安全-老纪31 分钟前
网络安全-js安全知识点与XSS常用payloads
javascript·安全·web安全
API_technology35 分钟前
电商API安全防护:JWT令牌与XSS防御实战
前端·安全·xss
yqcoder40 分钟前
Express + MongoDB 实现在筛选时间段中用户名的模糊查询
java·前端·javascript
十八朵郁金香1 小时前
通俗易懂的DOM1级标准介绍
开发语言·前端·javascript
计算机-秋大田1 小时前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
GDAL2 小时前
HTML 中的 Canvas 样式设置全解
javascript
m0_528723812 小时前
HTML中,title和h1标签的区别是什么?
前端·html
Dark_programmer2 小时前
html - - - - - modal弹窗出现时,页面怎么能限制滚动
前端·html