html表格内容的展开和收缩,elementui table中树形数据实现全部展开和全部收起

如图：(外部按钮控制table树形数据全部展开和收起)

1608112386(1).png

上代码：

收缩分类

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[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[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[j].classList.remove("dafult")

}

const dafult = this.$el.getElementsByClassName('dafult')

for(let a=0;a

dafult[a].click()

}

}

}

}

},

总结：

1.树形图全部展开的时候会有一个类名 el-table__expand-icon--expanded

2。先获取所有的数据包括节点。添加一个类名 (dafult)注意类名随便起。

3。判断：如果不存在el-table__expand-icon--expanded就移除刚才添加的类名dafult)。进而是实现点击事件

4.点击全部收起按钮的时候只要存在类名el-table__expand-icon--expanded就实现点击事件