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);
相关推荐
IT利刃出鞘15 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai16 小时前
HTML HTML基础(4)
前端·html
给月亮点灯|16 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
三思而后行,慎承诺16 小时前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手16 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰16 小时前
html音视频和超链接标签,颜色标签
前端·html·音视频
lxh011316 小时前
LRU 缓存
开发语言·前端·javascript
yangzhi_emo17 小时前
ES6笔记5
前端·笔记·es6
wow_DG17 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架