vue3+ts+element树列表懒加载的同时实现搜索

需求是用element中的el-tree实现懒加载同时又需要写搜索功能。

首先我们要知道，页面中，数据如果太多了，会造成页面卡死或者加载缓慢，所以我们要做懒加载，在element官网中有详情介绍，这里我不多做介绍，到处搜都可以搜到。

我也在网上找了很多方法，但是vue3貌似不能动态控制lazy的true和false,没法，只能用最笨的方法：写两个树，一个是懒加载树，一个是非懒加载树，控制显示和隐藏，代码如下（仅作记录）：

首先写出两个树列表（上面的那个是懒加载的树，下面那个是非懒加载树）：

<div style="margin-bottom: 45px">
			<el-tree class="filter-tree" node-key="id" :load="loadNode" lazy v-if="pzShow" :props="prop"
				:filter-node-method="filterNode" @node-click="nodeClick" :default-expanded-keys="treeData"
				v-loading="state.loading" :show-checkbox="state.isShowCheckbox" :default-checked-keys="state.ownOrgData"
				highlight-current check-strictly />
			<el-tree ref="treeRef" class="filter-tree" :data="state.orgData" node-key="id" v-if="!pzShow" default-expand-all
				:show-checkbox="state.isShowCheckbox" :default-checked-keys="state.ownOrgData" highlight-current
				:props="{ children: 'children', label: 'name' }" v-loading="pzSearchMapIsLoading"
				:filter-node-method="filterNode" @node-click="nodeClick"  check-strictly />
		</div>

写出查找的el-input：

<div class="tree-h-left">
						<el-input :prefix-icon="Search" v-model="filterText" placeholder="设备名称" />
					</div>

因为是通过v-if的 pzShow来控制显示和隐藏，所以需要设置：

const pzShow = ref(true)

在上文中的el-input中的绑定的值进行监听，实现显示和隐藏：

watch(filterText, (val) => {
	if (val) {
		pzShow.value = false;   //当输入框有值时关闭懒加载
		selectMacTree({ name: val, mactype: props.mactype }).then(res => {//获取后端搜索的数据 	//selectMacTree是我自己的后端接口，你们换成自己的
			state.orgData.length = 0
			state.orgData = res.data.result ?? []
			treeRef.value!.filter(val);
		})
	}
	else if (val == "" || val == " " || val == null) {
		pzShow.value = true // 懒加载树显示

	}
	
});

接下来的代码是懒加载的具体ts代码（asyncGetTree是我自己的后端代码，换成你们自己的即可）：

const loadNode = (node: any, resolve: any) => {
	state.loading = true

	//如果展开第一级节点，从后台加载一级节点列表
	if (node.level == 0) {

		loadfirstnode(resolve);
	}
	//如果展开其他级节点，动态从后台加载下一级节点列表
	if (node.level >= 1) {
		state.loading = false
		loadchildnode(node, resolve);
	} else {
		return
	}
	//如果展开其他级节点，动态从后台加载下一级节点列表

}
//加载第一级节点
const loadfirstnode = async (resolve: any) => {
	let params = {};
	await asyncGetTree(params).then((res: any) => {
		state.loading = false
		resolve(res.data.result ?? []);
	})
}
//加载节点的子节点集合
const loadchildnode = async (node: any, resolve: any) => {
	let params = {
		pid: node.key,
		type: node.data.type + 1
	};
	await asyncGetTree(params).then((res: any) => { 
		res.data.result.forEach((element: any) => {
			element.isleaf = !element.isleaf
		});
		if (res.data.result.length == 0) {
			ElMessage.error('数据拉取失败，请刷新再试！');
			return
		}
		resolve(res.data.result ?? []);
	})
}

到这里就完成啦，之前我是打算做成动态控制懒加载开关的，但是貌似行不通，没法子才做成显示和隐藏，如果大家有好的方法或者改善的意见，欢迎大家在评论区留下宝贵的想法