如圖:(外部按鈕控制table樹形數(shù)據(jù)全部展開和收起)
上代碼:
<el-button @click="contraction"><i class="el-icon-d-arrow-right" :style="{'transform': showStyle ? rotate1 : rotate2}" />收縮分類</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í)候會(huì)有一個(gè)類名 el-table__expand-icon--expanded
2。先獲取所有的數(shù)據(jù)包括節(jié)點(diǎn)竞川。添加一個(gè)類名 (dafult)注意類名隨便起店溢。
3。判斷:如果不存在el-table__expand-icon--expanded就移除剛才添加的類名dafult)委乌。進(jìn)而是實(shí)現(xiàn)點(diǎn)擊事件
4.點(diǎn)擊全部收起按鈕的時(shí)候只要存在類名el-table__expand-icon--expanded就實(shí)現(xiàn)點(diǎn)擊事件