在开发中,遇到了一个需求,想要动态把某些节点展开,但是element-ui只提供的默认展开属性,并没有提供对应的方法,经过网上搜索查询,加上自己的实践,完成了这个功能 下面上代码
<el-tree
ref="tree"
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="defaultExpandedKeys"
:default-checked-keys="defaultChecked"
:props="defaultProps"
:render-content="renderContent"
>
</el-tree>
<el-button @click="expanded(4231)">点击展开</el-button>
// node.key 为你想展开节点的(node-key绑定的值)
// 核心代码:this.$refs.tree.store.nodesMap[node.key].expanded = true
// 注意点:通过这个方法进行展开,只会展开一个节点,上层节点不会连带着一起展开
// 如果要把上层节点一起展开,需要用到循环
expanded(id) {
let node = this.$refs.tree.getNode(id).parent;
while (node.key !== 1001) {
this.$refs.tree.store.nodesMap[node.key].expanded = true;
node = node.parent;
}
},