element 動態合並表格

前言

　　element 官方的例子太簡單了，不滿足實際的需求

　　數據肯定是動態的，合並的行數，列數都是動態的，該如何知道每一行的合並數呢

需求

　　動態合並表格，數據來源於數據庫

正文

　　一開始，我的數據源是單獨的數組，表格數據合並了幾個數據，

　　我根據各個數組的長度，來決定每一行的合並數

　　結果：有些數據是正常的，但有些又合並出錯了。計算的方式不對

　　

 

 　　

　　嘗試二 

　　

dataPretreatment() 用這個方法 計算出每一行的行數

dataPretreatment(){   //表格數據列合並預處理,生成一個與行數相同的數組記錄每一行設置的合並數
        // 如果是第一條記錄（索引為0），向數組中加入1，並設置索引位置；
        // 如果不是第一條記錄，則判斷它與前一條記錄是否相等，如果相等，
        // 則向mergingRows中添入元素0，並將前一位元素+1，表示合並行數+1，
        // 以此往復，得到所有行的合並數，0即表示該行不顯示。
          for(let i = 0; i < this.tableData.length; i ++){ // tabledata 表格數據源
              if(i === 0){
                  this.mergingRows.push(1)
                  this.mergingPos = 0
              }else {
                if(this.tableData[i].name === this.tableData[i - 1].name) { //哪些數據是要合並的 合並的條件是什么
                  
                    this.mergingRows[this.mergingPos] +=1
                    this.mergingRows.push(0)
                }else {
                    this.mergingRows.push(1)
                    this.mergingPos = i
                }
              }
          }
      },

　

   用這個方法 mergeColumn（）綁定到官方提供的span-method 方法上面

mergeColumn({row, column, rowIndex, columnIndex}){
         if (columnIndex === 0) { //第一列
             const _row = this.mergingRows[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                rowspan: _row,
                colspan: _col
             }
         }
        // if(columnIndex === 1){  //第二列 每一行的條件可以不一樣 這樣就是動態多樣合並表格啦
        //     const _row = this.mergingRows[rowIndex];
        //     const _col = _row>0 ? 1 : 0;
        //      return {
        //          rowspan: _row,
        //          colspan: _col
        //      }
        //  }     
     },

　　展示結果

　　

 

注意注意

      1. 第一列 計算出要合並的行數

　　

 

　　2.發現鼠標在表格移動  mergeColumn（）這個方法一直在調用

Fannie式總結

　　一定要高清每一行的合並行數，按列來區分的

　　切記切記哦！不然表格合並出來的 跟你想象的不一樣