element 動態合並表格的步驟

Posted on by

前言

　　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式總結

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

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

以上就是element 動態合並表格的步驟的詳細內容，更多關於element 動態合並表格的資料請關註WalkonNet其它相關文章！

推薦閱讀：