el-table單元格動態合並問題

首先這是效果~

 

 

 

 

由於數據需要保密~我就把左邊數據去掉啦，解釋一下，第一列是company，第二列是company相同的另一個數據名稱~

我這里是根據每一個數據中的company的名字來判斷是否是屬於在同一個分類下的~

如果是同一個名字就把這幾個數據全部划分在這個分類下，如果使用簡單的單元格合並的話會有以下幾個問題

1.如果數據不是按照名字排列好的話，會出現重復分類的情況

2.如果新增數據之后，數據會另外新增在合並后的單元格之外，而非添加到合並好的單元格里面

我仔細地看了看el-table的文檔，看到了一個方法

 

 

 就是介個~~這么一來就好說啦

首先拿到數據，然后將數據按照他的company的字段進行排序划分，如果是名字相同的話就將他們放在一個數組中

如果不相同，就另起一個數組存放，存放好之后，新建一個數組，這個數據也就是綁定在el-table的data上面的那個啦

然后，將這個划分出來的數組連接起來成為新數組，這樣數據就默認排好了，以后如果新增數組的話只用再走一遍合並數組的過程就行啦

現在就剩最后一步，判斷是否合並單元格和進行合並，首先遍歷data也就是剛剛創建的新數組，然后判斷當前元素與上一個元素是否相同

相同的話也就是合並，不相同就不合並，最后調用:span-methods里面綁定的方法就可以合並啦

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

HTML部分

  <el-table
              :cell-style="addClass"
              :span-method="objectSpanMethod"
              :header-cell-style="{ background: '#409EFF', color: '#fff',padding:'5px' }"
              :data="UseData"
              border
              style="width: 100%;height:70vh"
              height="80%"
              @selection-change="handleSelectionChange"
            >
...后面的我就不寫了

數據部分

      spanArr:[],
      pos:'',
      UseData:[],
      productionNew:[]  //獲取到的數據

第一步（數組排序）

 sort_pro(data, keys = []) {     
      var c = [];
      var d = {};
      for (var element of data) {
        let element_keyStr = "";
        let element_key = [];
        let element_keyObj = {};
        for (var key of keys) {
          element_key.push(element[key]);
          element_keyObj[key] = element[key];
        }
        element_keyStr = element_key.join("_");
        if (!d[element_keyStr]) {
          c.push({
            ...element_keyObj,
            children: [element]
          });
          d[element_keyStr] = element;
        } else {
          for (var ele of c) {
            let isTrue = keys.some(key => {
              return ele[key] != element[key];
            });
            if (!isTrue) {
              ele.children.push(element);
            }
          }
        }
      }
      console.log(c)
      // this.getSumarysSmall = c
      return c;
    },

第二步（規范數據）

 DataPush(){
      this.UseData = []
      var pp = []
      this.UseData = this.sort_pro(this.productionNew,['companyname'])
      for(let i=0;i<this.UseData.length;i++){
        pp.push(...this.UseData[i].children)
      }
      this.UseData = pp
    },

第三步（判斷是否合並）

   getSpanArr(data) {　
     console.log(data)
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
            } else {
              // 判斷當前元素與上一個元素是否相同
            if (data[i].companyname === data[i - 1].companyname) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
        }
    },

在mounted里面調用

this.DataPush()
this.getSpanArr(this.UseData)

第四步（合並單元格）

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (rowIndex === this.UseData.length-3 || rowIndex === this.UseData.length-2 || rowIndex === this.UseData.length-1) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
          if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
          }
        }

然后效果就出來啦~~

第四步里面的前幾行那一堆if是我為了后面添加的合計和總數單元格左右合並然后添加的，可以忽略掉~

這樣就可以啦