el-tree 实现懒加载

发布时间 2023-06-30 16:31:25作者: 大云之下

为了解决数据量过大而导致的web页面卡死,我们采用懒加载的方式进行实现,

1. 首先,根据文档,我们在<el-tree>中加入 lazy 和   :load="loadNode" 如下图:

2. 在methods中写一下这个方法,如下图

 

说明一下,上图中的node.level === 0 时,我们在里面请求根节点的树结构,如下图:

 

 

然后,node.level >= 1 就是去请求接下来的层级了,根据你点击的节点来请求相对应的树结构数据,如下图:

 

 然后就可以了!