How to expand and collapse all element trees

How to expand and collapse all element trees

1. Expand all

idJust put each parent node's defaultExpendKeysinto the array

<el-tree
    class="tree-transparent"
    ref="projectTree"
    :draggable="false"
    :default-expanded-keys="defaultExpandedKeys"
    @node-click="treeNodeClicked"
    :check-on-click-node="true"
    :data="treeData"
    :highlight-current="true"
    :default-expand-all="false"
    :expand-on-click-node="false"
    node-key="id">

For example, my tree structure has three levels, so I need to idput all of the first two levels defaultExpandKeysinto

// TREE OPERATION
expandAll(){
    
    
    this.defaultExpandedKeys = []
    this.treeData.forEach(type => {
    
    
        this.defaultExpandedKeys.push(type.id)
        type.children.forEach(channel => {
    
    
            this.defaultExpandedKeys.push(channel.id)
        })
    })
},

It all unfolded.

2. Fold all

element-treeThere is no way to fold them all, but it can be worked around.
Just reload the data of tree, its default form is folded.

For example this treedata is treeData, you can:

collapseAll(){
    
    
    this.getProjectInfo()  // 重新获取树的数据
    this.defaultExpandedKeys = []
},

3. Results