vue使用Element-ui使用el-tree控件实现模糊搜索

Posted 2022-12-16 龖龖龖

封装tree组件

1、子组件代码

//搜索框
<template>
	<el-input
		v-if=""
		v-model="deptName"
		placeholder="请输入关键字"
		clearable
		size="small"
		@input="treeInput"
		prefix-icon="el-icon-search"
		style="margin-bottom:20px;"
	/>
	
	<div class="head-container">
		<el-tree :data="treeData" :props="defaultProps"/>
	</div>
</template>

methods:
	treeInput(val) 
	//将搜索条件传到父组件进行过滤筛选
		this.$emit("treeInput",val)
	

2、父组件代码

data()
	return
		treeData:[]
	

methods:
	treeInput(e)//子组件传递过来的事件
		if(!e) 
			getTreeData("请求参数").then((res)=>//请求树接口
				this.treeData = res
			);
			return;
		
		let arr = []
		this.treeData.filter((item)=>
			if(item.name.indexOf(e) !== -1 && item.pid !== "-1") 
				arr.push(item);
			
			for(var i of item.children) 
				if(i.name.indexOf(e) !== -1)
					arr.push(i);
				
			
		)
		this.treeData = arr