ElementUI tree异步树(懒加载)节点局部刷新

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:44   1310   0

前言:最近使用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')即可。

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP