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

最新推荐文章于 2024-12-04 09:25:44 发布

原创最新推荐文章于 2024-12-04 09:25:44 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 2.0 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Element UI中实现异步树节点的刷新功能。通过设置节点的加载状态并主动调用展开方法，可以重新加载指定树节点及其子节点的数据。

前言：最近使用element开发项目，在使用异步树时（即添加了lazy），翻阅了官方提供的文档，并未找到可直接提供给开发者使用的刷新某个树节点的方法。可喜的是，终于还是找到了解决的办法，即找到对应的树节点，使用expand方法

思路：找到想要刷新的树节点，重新模拟执行一次展开请求子节点的功能。

  <el-tree
     lazy  
     ref="tree"
    :load="loadNode"
    :node-key="id"    
    >
  </el-tree>
  ...
 <scripit>
     
     methods: {
         refreshNodeBy(id){
             let node = this.$refs.tree.getNode(id); // 通过节点id找到对应树节点对象
             node.loaded = false;
             node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
         }
     }
     
 </script>