VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能

 

背景

ElementUI官方提供了el-table的树形结构展示方式。
通常使用树形结构时，会需要“全部展开”和“全部收回”的按钮功能，便于我们能够方便对数据表格的操作。比如下图的实现效果：

 

 

 

实现思路

官方文档中给出了表格级别的方法，在Table Methods中，可以找到 toggleRowExpansion 方法，其具体含义参见官网释义。

该方法可以实现表格中某一行的展开或者收缩功能，那么我们就借用此方法来实现所有行的功能，也是非常简单的了。

废话不多说，直接上代码：

//先是两个功能按钮
<el-button type="primary"  @click="toggleRowExpansion(true)" icon="el-icon-arrow-down" size="mini">全部展开</el-button>
<el-button type="primary"  @click="toggleRowExpansion(false)" icon="el-icon-arrow-up" size="mini">全部收回</el-button>

// 再是一个具体方法的实现
 //切换树形展开
//切换数据表格树形展开
toggleRowExpansion(isExpansion){
    this.toggleRowExpansion_forAll(this.tableData,isExpansion);
},
toggleRowExpansion_forAll(data,isExpansion){
    data.forEach(item=>{
        this.$refs.dataTreeList.toggleRowExpansion(item,isExpansion);
        if(item.children != undefined && item.children != null){
            this.toggleRowExpansion_forAll(item.children,isExpansion);
        }
    })
}

　　

 

 

注：tableData为el-table的data属性值，dataTreeList为el-table的ref属性值。
实际上，我是使用了一个循环遍历来实现这样的效果。

题外话：
对于table method中的方法，官网中并不会给出所有方法的使用案例，一开始是找不到任何关于toggleRowExpansion的方法调用形式的，后来经过搜索发现同级别下clearSelection方法有使用案例，这才清楚了toggleRowExpans-ion方法是如何调用的。

这个很简单，就没有上传到项目中啦。
————————————————
版权声明：本文为CSDN博主「小张写bug」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_28200505/article/details/106102032