vue3 el-tree如何在lazy懒加载情况下实现搜索时禁止懒加载

众所周知,懒加载是在树形结构数据量大时使用,使树只查询顶层,因此导致搜索功能只能匹配最顶层的数据(因为下一级数据都没加载出来)。

这里我的思路是,搜索全量数据(自带childList的完整树形接口),覆盖懒加载的数据。

代码很简单,当查询输入框为空时,默认走懒加载的流程查询数据。当输入框有值时,使用另一个接口查询数据。

** 数据正常搜索展示后,发现只要选择展示下级,还是会走懒加载的流程,查询下级列表。导致根据过滤条件筛选的下级目录,数据异常,反而被懒加载数据覆盖了。

这里我们需要动态控制懒加载,在没输入搜索信息时,使用懒加载,输入信息后禁用懒加载。

lazy:使用懒加载 属性 T/F

我们只需要按照图1动态设置isLazy的属性即可完成切换。

切换完,我们又碰到了第二个问题。由于我们动态切换的懒加载,导致load方法已经加载完毕,无法禁止,我们需要在对应方法中过滤掉数据

判断节点的childList是否为空,

不为空则使用resolve来引入下级列表数据展示。

为空则则使用resolve来引入空列表。使其完成查询下级流程。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值