vue 树结构类型数组深度遍历查询(模糊查询),一般用于 输入框和tree树形控件结合时使用

<input type="text" v-model="inputSearch" @input="search" />

测试数据

data(){
	return{
		inputSearch:'',//与输入框双向绑定的搜索参数
		showList:[],//展示的数据
		allList:[
			{ id:1,parentId:0,name:'根目录' },
			{ id:2,parentId:1,name:'目录1-1' },
			{ id:3,parentId:2,name:'目录2-1' },
			{ id:4,parentId:3,name:'目录3-1' },
			{ id:5,parentId:1,name:'目录1-2' },
		],//全部数据 - 测试数据
		arr:[],
		arr2:[],
		arr3:[]
	}
}

methods:{
	search(){
		this.showList = []
		this.arr = []
		this.arr3 = []
		this.arr2 = JSON.parse(JSON.stringify(this.allList))  //防止影响到原数组
		if(this.inputSearch == ''){
			this.showList = this.transArr(JSON.parse(JSON.stringify(this.allList)))
		}else{
			for(let i in this.this.arr2){
				// toLowerCase() 不区分大小写  indexOf 匹配失败时会返回 -1
				if (this.arr2[i].name.toLowerCase().indexOf(this.inputSearch.toLowerCase()) != -1) {
					this.arr.push(this.arr2[i])
				}
			}
			// 通过上面，就将模糊搜索到的数据全部放进 arr 了，但是这不能保证某个搜索到的分组的父级分组一定拿到了，所以还要再做判断
			if (this.arr[0]) {
				await this.loop()
				// arr3就是此次查询到的数据 + 其父级数据  expand参数作为判断
				this.arr3.forEach((item) => {
					item.expand = true
				})
				// 如果不是只想展示部分，而是想展示全部
				this.arr2.forEach((item) => {
					this.arr3.forEach((item2) => {
						if (item.id == item2.id) {
							item = item2
						}
					})
				})
				this.showList= this.transArr(JSON.parse(JSON.stringify(this.arr2)))
			} else {
				this.showList= this.transArr(JSON.parse(JSON.stringify(this.allList)))
			}
		}
	},
	// 循环遍历
	loop() {
		for (let i in this.arr) {
			this.arr2.forEach((item) => {
				if (this.arr[i].parentId == item.id) {
					this.arr.push(item)
					this.arr3.push(this.arr[i])
					this.arr.splice(i, 1)
					this.loop()
				}
			})
		}
	},
	// 转换数据格式，将一维数组转换为多维数组
	transArr(info) {
		let arr = []
		info.forEach((item) => {
			item.children = []
			info.forEach((res) => {
				if (res.parentId== item.id) {
					item.children.push(res)
				}
			})
		})
		for (let i in info) {
			if (info[i].parentGroupId == 0) {
				info[i].expand = true
				arr.push(info[i])
			}
		}
		return arr
	},
}