前言:最近使用element开发项目,在使用异步树时(即添加了lazy),翻阅了官方提供的文档,并未找到可直接提供给开发者使用的刷新某个树节点的方法(即增加某个树节点或修改某个树节点后无法实现实时刷新整棵树或刷新当前改动的节点)。可喜的是,终于还是找到了解决的办法,即找到对应的树节点,使用expand方法
思路:找到想要刷新的树节点,重新模拟执行一次展开请求子节点的功能。
话不多说,直接看代码吧!
<el-tree
lazy
ref="asyncTree"
:load="loadNode"
:node-key="id"
>
</el-tree>
...
<scripit>
...
methods: {
refreshNodeBy(id){
let node = this.$refs.asyncTree.getNode(id); // 通过节点id找到对应树节点对象
node.loaded = false;
node.expand(); // 主动调用展开节点方法,重新查询该节点下的所有子节点
}
}
...
</script>
上述refreshNodeBy(id)方法,形参为id,对应的实参是<el-tree></el-tree>里的node-key,该方法何时调用?答案即在用户新增树节点或修改树节点时调用,例如新增了id为"120000"的树节点,那么此时调用refreshNodeBy('120000')即可。