el-tree 数据懒加载实现异步搜索

坐标: 北京 天气: 晴 有风 温度适宜

背景

Element UI el-tree 官方对于数据量大希望异步加载的数据 支持懒加载, 懒加载会依赖 load 方法,自动触发加载. 同时 官方的搜索只能过滤展示出已经加载的数据 , 而需求中的搜索需要重新请求后端 获取到新的结果.

难点

触发搜索后,如何更新异步加载的数据,进行展示,并进行后面的异步加载,因为el-tree 懒加载情况下设置 data 是不会生效的.

解决

更新数据不生效 从懒加载方法入手, 想办法清空懒加载展示的内容, loadNode(node, resolve); 在第一次加载时, 等效于根node, 可以清空其childNodes 此时 el-tree 的数据显示将被更新, 清空后可以调用手动调用 load方法,根据实际需求 , resolve() 返回对应的数据即可.

实现

1. el-tree 设置 lazy 及 load 方法

            <el-tree
                ref="xxx"
				node-key='xx'
				:props="xxx"
				:current-node-key="xxx"
				show-checkbox  
                :default-checked-keys="xxx"
				:filter-node-method="xxx"
				lazy
				:load="loadNode"
				@node-click="xxx"
				@check="xxx"
				@check-change="xxx"
			>

2. 在第一次加载目录时 保存 node 及 resolve 以便在搜索时可以清空 手动调用loadNode

       const loadNode = (node, resolve) => {
			if (node.level === 0) {
				lazyNode = node;
				lazyResolve = resolve;
			}
            // 实际的API请求
			xxx(node, resolve);
		};

3.触发搜索后 清空原数据 lazyNode.childNodes = []; 因为要不同的接口逻辑 所以设置了标识

       // 搜索
		const handleSearchChange = (val) => {
			if (lazyNode) {
				lazyNode.childNodes = [];
				searchFlag.value = true;
				loadNode(lazyNode, lazyResolve);
			}
		};

4. 根据标识 在loadNode 中调用搜索的接口进行resolve 即

            // 不区分权限获取目录
			xxx[apiName](params).then(res => {
				if (res.code === 0) {
					if (resolve) {
						// 将当前node取消选中 其选中状态由子节点确定
						resolve(res.data);
					}
				} else {
					xxx;				
                }
			});

代码还没有精进 需要多测试.

积跬步 至千里.