elementui table中樹(shù)形數(shù)據(jù)實(shí)現(xiàn)全部展開(kāi)和全部收起

如圖:(外部按鈕控制table樹(shù)形數(shù)據(jù)全部展開(kāi)和收起)


1608112386(1).png

上代碼:

<el-button @click="contraction"><i class="el-icon-d-arrow-right" :style="{'transform': showStyle ? rotate1 : rotate2}" />收縮分類(lèi)</el-button>

contraction(val) {
                if(this.showStyle){
                    this.showStyle = false
                    if(this.tableData.length !=0){
                        const elsopen = this.$el.getElementsByClassName('el-table__expand-icon--expanded')
                        if(this.$el.getElementsByClassName('el-table__expand-icon--expanded')){
                            for(let i=0;i<elsopen.length;i++){
                                elsopen[i].click()
                            }
                        }
                    }
                }else{
                    this.showStyle = true
                    let els = document.getElementsByClassName('el-table__expand-icon')
                    if(this.tableData.length !=0 && els.length != 0){
                        for(let j1=0;j1<els.length;j1++){
                        els[j1].classList.add("dafult") 
                        }
                        if(this.$el.getElementsByClassName('el-table__expand-icon--expanded')){
                            const open = this.$el.getElementsByClassName('el-table__expand-icon--expanded')
                            for(let j=0;j<open.length;j++){
                                open[j].classList.remove("dafult")
                            }
                            const dafult = this.$el.getElementsByClassName('dafult')
                            for(let a=0;a<dafult.length;a++){
                                dafult[a].click()
                            }
                        }
                    }
                }
            },

總結(jié):

1.樹(shù)形圖全部展開(kāi)的時(shí)候會(huì)有一個(gè)類(lèi)名 el-table__expand-icon--expanded

2。先獲取所有的數(shù)據(jù)包括節(jié)點(diǎn)。添加一個(gè)類(lèi)名 (dafult)注意類(lèi)名隨便起。

3。判斷:如果不存在el-table__expand-icon--expanded就移除剛才添加的類(lèi)名dafult)。進(jìn)而是實(shí)現(xiàn)點(diǎn)擊事件

4.點(diǎn)擊全部收起按鈕的時(shí)候只要存在類(lèi)名el-table__expand-icon--expanded就實(shí)現(xiàn)點(diǎn)擊事件

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容