elementui合并指定表格单元格合并行合并列

我们先看看官网给的例子，只拿合并部分代码

//这个是合并列

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

        if (rowIndex % 2 === 0) {

          if (columnIndex === 0) {

            return [1, 2];

          } else if (columnIndex === 1) {

            return [0, 0];

          }

        }

      },

//这个是合并行

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {

        if (columnIndex === 0) {

          if (rowIndex % 2 === 0) {

            return {

              rowspan: 2,

              colspan: 1

            };

          } else {

            return {

              rowspan: 0,

              colspan: 0

            };

          }

        }

      }

官网给的DATA很规范，给出了每碰到2整除的时候合并行，然而实际业务中需要合并不确定行数位置，不确定合并行数量的情况。

如果没理解这个循环和rowspan、colspan，完全没法用，我就看了2个小时，还分别console.log了row,col来看，直到有个大侠写的才懂。

1、确定每行需要合并的标志

在数据准备中得到数据列表

data():{

return{

tableData:[{xxxxxxxx}]

}

}

2、在中计算需要合并的行

mounted(){

        this.getSpanArr(this.tableData);

    },

3、method中

getSpanArr(data) {

      this.spanArr = [];

      for (var i = 0; i < data.length; i++) {

        if (i === 0) {

          // 如果是第一条记录（即索引是0的时候），向数组中加入１

          this.spanArr.push(1);

          this.pos = 0;

        } else {

          //如果条件相等，计算到合并的行中，我这里使用的是title相等条件

          if (data[i].title === data[i - 1].title) {            

            this.spanArr[this.pos] += 1;

            this.spanArr.push(0);

          } else {

            // 不相等push 1

            this.spanArr.push(1);

            this.pos = i;

          }

        }

      }

    }

4、合并行方法

objectSpanMethod({ row, column, rowIndex, columnIndex }) {

        if (columnIndex === 0) {

        const _row = this.spanArr[rowIndex];

        const _col = _row > 0 ? 1 : 0;

        return {//这个return的内容返回本行是显示还是隐藏，例如，_row=2,_col=1代表合并2行1列，如果都是0则不显示该行

          rowspan: _row,

          colspan: _col,

          pos:0,

        };

      }