ElementUI tree 懒加载手动刷新数据

最新推荐文章于 2025-05-07 09:30:28 发布

kksw1121

最新推荐文章于 2025-05-07 09:30:28 发布

阅读量1.3w

点赞数 3

CC 4.0 BY-SA版权

文章标签： element tree加载数据

本文链接：https://blog.csdn.net/qq_43225030/article/details/99545852

本文介绍了一种在Element UI中使用懒加载实现树形组件数据动态加载的方法。通过将子节点清空并重新加载，避免了数据重复，确保了每次加载的都是最新数据。文章详细展示了如何在Vue中实现这一功能，包括定义loadNode方法来加载数据，以及如何通过$http发起请求获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-tree :props="props" :load="loadNode" lazy></el-tree>

loadNode(node, resolve) {
	 //加载数据的方法里把node，reslove存起来
      this.node = node;
      this.resolve = resolve;
 	 // 把子节点清空，否则下次加载时会直接往里push子节点导致重复
      this.node.childNodes = [];
     
      this.$http.get({
        url: url,
        successCallback: res => {
          resolve(res.data);
        },
        failCallback: res => {
          console.log(res);
        }
      });
   },
   refreshData(){
   //手动调用加载数据方法
   this.loadNode(this.node,this.reslove);
   }