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);

原文地址：https://blog.csdn.net/weixin_43923808/article/details/145287937

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！