element-ui動态合并單元格

element官網上的根據行列數進行合并的屬實不實用，真實的場景往往是将背景某一項的id相同的進行合并，且多列需要合并。正當我十分郁悶的時候，看到了一篇曙光：

https://blog.csdn.net/qq_29468573/article/details/80742646

這篇部落格給我了很大的指導

首先分析一下源碼

getCount(model) {
      this.spanArr = [];
      for (var i = 0; i < model.length; i++) {
        //循環背景資料model
        if (i === 0) {
          //如果是第一項  則向spanArr中push1   索引值設為0
          this.spanArr.push(1);  //spanArr=[1]
          this.pos = 0;
        } else {
          // 非第一個情況   i=1  則為第二個
          // 判斷目前元素與上一個元素是否相同     
          // 如果兩條資料的id值相同  則執行合并操作
          if (model[i].id === model[i - 1].id) {
          // 假設第二項等于第一項
            this.spanArr[this.pos] += 1;  //spanArr[2]   
            this.spanArr.push(0);//spanArr[2,0]
          } else {
          //假設不等于
            this.spanArr.push(1);//spanArr[1,1]
            this.pos = i;//pos = 2
          }
        }
      }
           

0表示該行不顯示

ArrSpanMethod({ row, column, rowIndex, columnIndex }) {
//row 目前行   column 目前列    rowIndex目前行号  columnIndex目前列号
      if (columnIndex === 0 || columnIndex === 3...) {
     //目前為第一列和第四列的時候
        const _row = this.spanArr[rowIndex];//spanArr[0] 第一行  [2,0]
        const _col = _row > 0 ? 1 : 0;//合并與否
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    }