elementUI表格合并行(vue)

公司提了个小需求

如图所示，合并了第一列内容相同的行。

eliment ui官网中只是讲解了合并某一列的固定行该怎么做（就是类似于每次都是合并三行），而我这是合并不同数量的行。

于是我陷入了纠结和不解中，不知道该怎么做。

这时可爱的娜娜姐，出手编写了解决问题的代码，顺利完成了我的任务！她竟然还不好意思发博客…

咳咳 那我只好暂时替她发一下博客了（斜眼笑)

<el-table
          :data="tableData"
          height="495"
          :span-method="objectSpanMethod"
        >
 </el-table>

划重点了 :span-method=“objectSpanMethod”

data(){
  return(){
     // getSpanArr方法中需要用到的两个属性
     spanArr:[],
     pos:0,
  }
}

//处理数据为合并表格做准备
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          //这里的groupName是第一列的属性，我用来判断是否相同。
          if (data[i].groupName === data[i - 1].groupName) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },

//合并列表格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // _row = 0，_col = 0 表示这一次不合并，不显示，
          // _row = 2，_col = 1 表示这一次合并第一列的两行
          rowspan: _row,
          colspan: _col,
        };
      }
    },

created(){
   getDate();//通过后台接口获取表格数据，这个方法你们按你们的写
   this.getSpanArr(this.tableData);
}

完事，大功告成。