溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用element怎么對表格動(dòng)態(tài)合并

發(fā)布時(shí)間:2020-12-31 15:31:42 來源:億速云 閱讀:291 作者:Leah 欄目:開發(fā)技術(shù)

本篇文章為大家展示了使用element怎么對表格動(dòng)態(tài)合并,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。

dataPretreatment() 用這個(gè)方法 計(jì)算出每一行的行數(shù)

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

用這個(gè)方法 mergeColumn()綁定到官方提供的span-method 方法上面

使用element怎么對表格動(dòng)態(tài)合并

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){ //第二列 每一行的條件可以不一樣 這樣就是動(dòng)態(tài)多樣合并表格啦
    //   const _row = this.mergingRows[rowIndex];
    //   const _col = _row>0 ? 1 : 0;
    //   return {
    //     rowspan: _row,
    //     colspan: _col
    //   }
    // }   
   },

  展示結(jié)果

使用element怎么對表格動(dòng)態(tài)合并

注意注意

      1. 第一列 計(jì)算出要合并的行數(shù)

使用element怎么對表格動(dòng)態(tài)合并

  2.發(fā)現(xiàn)鼠標(biāo)在表格移動(dòng)  mergeColumn()這個(gè)方法一直在調(diào)用

上述內(nèi)容就是使用element怎么對表格動(dòng)態(tài)合并,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI