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