您好,登錄后才能下訂單哦!
本篇文章為大家展示了使用element怎么對表格動(dòng)態(tài)合并,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
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 方法上面
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é)果
1. 第一列 計(jì)算出要合并的行數(shù)
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è)資訊頻道。
免責(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)容。