前端树形结构数据的搜索与格式化

介绍啊

今天分享一个借鉴 elementUI 前端过滤的方法（好吧，抄袭写得那么坦然，哈哈）。主要过滤思路从elementUI 的过滤树代码中参考的，添加了一些项目中常用到的功能。

上代码

代码太多不好看不要紧，下面有一丢丢解释。

export const filterTree = ({
	value,
	data,
	prop,
	filter,
	filterXor,
	children,
	visible,
	filterChildren = true,
	callback
}) => {
	// 默认赋值
	visible = visible || 'visible'
	children = children || 'children'
	prop = prop || 'text'

	const filterNodeMethod = function (value, data) {
		if (!value) {
			return true
		}
		let flag = (data[prop] || '').indexOf(value) !== -1
		return filterXor ? !flag : flag
	}

	const traverse = function (node) {
		const childNodes = node[children] || []

		childNodes.forEach(child => {
			callback && callback(child)
			child[visible] =
				(!node.root && !filterChildren && node[visible]) ||
				filterNodeMethod.call(child, value, child, prop)

			traverse(child)
		})

		if (!node[visible] && childNodes.length) {
			let allHidden = true
			allHidden = !childNodes.some(child => child[visible])

			node[visible] = allHidden === false
		}
		if (!value) {

		}
	}
	let totalData = {
		root: true
	}
	totalData[children] = data
	traverse(totalData)

	if (filter) {
		let copyData = data.slice()
		let filterHandle = filterData => {
			return filterData.filter((item, index) => {
				if (item[visible]) {
					if (item[children]) {
						item[children] = filterHandle(item[children])
					}
					return true
				}
				return false
			})
		}
		return filterHandle(copyData)
	}
}

方法解释

一丢丢解释，* 必传
/**

• 过滤树型结构，默认给节点添加 属性 visible 赋值 Boolean 区分匹配与未匹配
• * @param value { String | Number } 根据 value 值过滤
• * @param data {Array} 将要过滤的数据
• @param prop {String} 过滤属性（对象上的key） 默认值为 text
• @param filter {Boolean} 值为true时，返回新对象，原有对象也添加属性 visible，值不传或为false，只在原有对象上添加属性visible
• @param children {String} 子节点字段 默认值为 children
• @param visible {String} 判断是否显示字段 默认值为 visible
• @param filterXor {Boolean} 过滤取反
• @param filterChildren {Boolean} 是否过滤子节点 默认 true (父级匹配成功，子是否还需要过滤，默认需要)
• @param callback {Function} 自定义修改子节点回调 返回当前 节点 对象
  */

看看描述就知道上面代码提供了什么功能，只看代码解释不直观，下面整个列子。

Demo 哦

树数据 过滤 代码Demo

结语

上面的例子随便找了一个树形插件，稍微演示了一遍过滤树型数据。
话语比较精简，大家看demo就好，以上代码如有疏漏或建议，欢迎指正。