iview tree组件 loadData 异步加载中 loading , expand 属性

最新推荐文章于 2025-06-12 09:23:39 发布

原创最新推荐文章于 2025-06-12 09:23:39 发布 · 7.9k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细解析了iViewTree组件在异步加载数据过程中遇到的问题及解决方案，强调了初始化属性的重要性，并介绍了如何使用vue.$set方法正确地添加和修改属性，以实现正确的异步加载效果。

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

iview tree组件 loadData 异步加载事件中遇到的小问题,记录下来以免忘记

:data=“treeData” 指的是需要渲染的树结构,由于是使用异步加载.所以需要留一个初始值作为入口.
treeData: {
id: 0,
title: ‘root’,
loading: false,
expand: false,
children: [ ],
}
需要注意的是,以上几个属性都是必须的.并且children必须是 [ ],用来填装后台返回的数据.
如果缺少 children = []; loading = false;这两个属性的话,是不会应用异步加载效果。(另外,如果网络超时之类的一直接受不到后台返回的数据的话,需要将loading 再次重置为 false);
在项目中,由于当时后台返回的数据当中,并没有loading,expand属性.于是做了一个递归去添加.然而添加之后发现并没有用.后面查了资料之后,发现需要用vue.$set方法去操作.

treeExpand ( treeData: any [], flag: Boolean ) {
      for (const i of treeData) {
		this.$set( i, 'expand', flag );
		this.$set( i, 'loading', false );
        if (i.children) {
          i.children = this.treeExpand(i.children,flag);
        }
      }
      return treeData;
  }

vue.set方法主要是设置对象属性,确保属性被创建后也是响应式的, 同时会触发视图更新