element tree 如何全部展开、全部折叠_eltree展开全部节点

element tree 如何全部展开、全部折叠

一、全部展开

只需要将每个父节点的 id 放到 defaultExpendKeys 数组中即可

<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">
1
2
3
4
5
6
7
8
9
10
11
12

比如我这个 tree 的结构有三级，就需要将前两级的所有 id 放到 defaultExpandKeys 中

// TREE OPERATION
expandAll(){
    this.defaultExpandedKeys = []
    this.treeData.forEach(type => {
        this.defaultExpandedKeys.push(type.id)
        type.children.forEach(channel => {
            this.defaultExpandedKeys.push(channel.id)
        })
    })
},
1
2
3
4
5
6
7
8
9
10
11

就全部展开了。

二、全部折叠

element-tree 没有全部折叠的方法，但可以变通一下。
将 tree 的数据重新加载一下就可以了，它的默认形态就是折叠的。

比如这个 tree 的数据是 treeData，你可以：

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

三、结果