vueJs使用

elementui table中树形数据实现全部展开和全部收起

2020-12-16  本文已影响0人  记录学习生活

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


1608112386(1).png

上代码:

<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()
                            }
                        }
                    }
                }
            },

总结:

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

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

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

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

上一篇下一篇

猜你喜欢

热点阅读