【无标题】

树组件的数据过滤，模糊查询

应用环境

js相关计算， es6（使用了一些数组的语法糖）

处理逻辑：

树节点的数据是一个数组，通过遍历（map、for、foreach等）可以拿到最底层的节点。
将节点通过递归的模式进行遍历，拿到过滤数据。

这里主要的坑在于什么时候采用filter和map。

数据格式：

// children的结构等于data的结构，没有children默认是最底层的叶子节点
const data = [
	{ value : '',label :'',children :[] },
	{ value : '',label :'',children :[] },
	{ value : '',label :'',children :[] },
]

// An highlighted block
const dg = ( data ) => {
	//判断当前节点是否为最后一个children节点
	//如果说最后一个节点，那么就用filter，过滤掉数据
	//最后一个节点的依赖： 是一个数组，数组不为空，数组中的每一项都有children（这里只判断了其中一个，你可以自己想办法去判断所有）
	const type = Array.isArray(data) && data[0] && data[0].children !== undefined ? 'map' : 'filter'

		//使用ES6的语法糖，map  filter 
		return data[ type ]( item => {
			//含有子节点，通过递归去拿到你需要筛选的内容
			if ( item.children ) {
				//数据操作后的结果，执行了filter或者map的结果
				const filterRes = dg(item.children)
				//这里返回了原本的数据结构
				return  {
					...item ,
					children : filterRes.length > 0 ? filterRes.filter( item1 => {
						return item1.children == undefined || item1.children.length > 0
					} ) : []
				} 
			} else {
				//这里是做了一个模糊查询，比如结果是abcd，你输入的模糊数据为ac，可以拿到数据，如果当数据量非常大的时候可能会有延迟或者堆栈移除，可以通过异步或者简写相关内容完成效果
				return searchValue.value.split('').reduce((a,b)=>{
					return a && item.label.includes(b)
				},true )
			}
		} )
	}
	

以上是个人的解决办法，如果有更好的答案，可以评论区@我