Introduction:

Today I’m going to share a way to use elementUI’s front end for filtering. The main filtering ideas are referenced in elementUI’s filter tree code, adding some functionality that is often used in projects.

In the code

It doesn’t matter if the code is too long and ugly, there are a few explanations below.

export const filterTree = ({
	value,
	data,
	prop,
	filter,
	filterXor,
	children,
	visible,
	filterChildren = true,
	callback
}) = > {
	// Default assignment
	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
		returnfilterXor ? ! 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 = trueallHidden = ! 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)
	}
}
Copy the code

Methods to explain

Every explanation will be passed on

• Visible assignment Boolean distinguishes between matched and unmatched
• * @param value { String | Number} filter by value
• * @param data {Array} The data to be filtered
• @param prop {String} The filter attribute (key on the object) defaults to text
• @param filter {Boolean} if the value is true, the new object is returned, and the existing object is added with the attribute Visible. If the value is not passed or false, the existing object is added with the attribute Visible
• @param children {String} The default value of the child node field is children
• @param visible {String} Check whether the display field defaults to visible
• @param filterXor {Boolean} filter inversely
• @param filterChildren {Boolean} Whether to filter child nodes Default to true (if the parent matches successfully, whether the child needs to be filtered, default yes)
• @param callback {Function} Custom modify child node callback returns the current node object

Look at the description to see what the above code provides, just look at the code explanation is not intuitive, the entire below.

The Demo oh

Tree data filtering code Demo

conclusion

The above example uses a random tree plugin to show you a little bit about filtering tree data.

The words are more concise, we see the demo, the above code if there are omissions or suggestions, welcome to correct.