本示例基于vue2 + element-ui

element-ui 的官网demo是只保留到过滤值一级的，并不会保留其子级

目标

1、Tree 树形控件 保留过滤值的子级

2、在第一次过滤数据的基础上进行第二次过滤

先看效果

Tree 树形控件 保留过滤值的子级

<el-treeclass="filter-tree"node-key="id":data="treeData":props="defaultProps"default-expand-allshow-checkbox@check-change="handleCheckChange":filter-node-method="filterNode"ref="tree">
</el-tree>// 对树节点进行筛选时执行的方法
filterNode (value, data, node) {let parentNode = node.parent; // 父级nodelet labels = [node.label]; // 当前node的名字let level = 1; // 层级while (level < node.level) {labels = [...labels, parentNode.label]; // 当前node名字，父级node的名字parentNode = parentNode.parent;level++;}return labels.some((d) => d.indexOf(value) !== -1);
},

在第一次过滤数据的基础上进行第二次过滤

1、下载插件库

npm install -S circular-json

2、在使用页面引入

import CircularJSON from 'circular-json'

3、代码应用

<template><div class="about-container"><h1>获取过滤后的tree数据</h1><el-inputclearableplaceholder="第一次过滤"@keyup.enter.native="handleFilter1"v-model="firstText"></el-input><el-inputstyle="margin-top: 10px;"clearableplaceholder="第二次过滤"@keyup.enter.native="handleFilter2"v-model="secondText"></el-input><el-button @click="handleFilter1(),handleFilter2()" type="primary" icon="el-icon-search">搜索</el-button><div><el-treeclass="filter-tree"node-key="id":data="treeData":props="defaultProps"default-expand-allshow-checkbox@check-change="handleCheckChange":filter-node-method="filterNode"ref="tree"></el-tree></div></div>
</template><script>// 在使用的组件内引入import CircularJSON from 'circular-json'export default {data() {return {// 第一次过滤firstText: '',// 第二次过滤secondText:'',// tree控件的渲染值treeData: [{id: 1,label: '一级1',children: [{id: 4,label: '二级1-1',children: [{id: 9,label: '三级1-1-1',children: [{id:91,label: '四级1'},{id:92,label: '四级2'}]}, {id: 10,label: '三级1-1-2'}]}]}, {id: 2,label: '一级2',children: [{id: 5,label: '二级2-1'}, {id: 6,label: '二级2-2'}]}, {id: 3,label: '一级',children: [{id: 7,label: '二级3-1'}, {id: 8,label: '二级3-2'},{id: 82,label: '四级3'}]},{id: 31,label: '奇迹',children: [{id: 71,label: '奇迹1'}, {id: 81,label: '奇迹2'}]}],defaultProps: {children: 'children',label: 'label'},// tree的原版备份数据deepCloneTreeData:[],// 第一次过滤后tree控件渲染数据firstFilterdata:[],}},mounted() {this.deepClone(this.treeData).then((res)=>{this.deepCloneTreeData = res;})},methods: {// 第一次过滤handleFilter1() {// 第一次过滤时没有输入值，即用tree控件的原始值if(!this.firstText){this.treeData = this.deepCloneTreeData;this.firstFilterdata = this.deepCloneTreeData;return}this.$refs.tree.filter(this.firstText)this.firstFilterdata = this.getFilterData();},// 第二次过滤handleFilter2() {// 基于第一次过滤出来的数据if(this.firstFilterdata.length > 0) this.treeData = this.firstFilterdata;this.$nextTick(()=>{this.$refs.tree.filter(this.secondText);})},// 对树节点进行筛选时执行的方法filterNode (value, data, node) {let parentNode = node.parent; // 父级nodelet labels = [node.label]; // 当前node的名字let level = 1; // 层级while (level < node.level) {labels = [...labels, parentNode.label]; // 当前node名字，父级node的名字parentNode = parentNode.parent;level++;}return labels.some((d) => d.indexOf(value) !== -1);},// tree 的选择事件handleCheckChange(data, checked, indeterminate) {const arr = this.$refs.tree.getCheckedKeys()},// 需要获取过滤后的 Tree组件数据getFilterData() {const rootData = this.$refs.tree.root;if (rootData.visible) {const childNodesStr = CircularJSON.stringify(rootData.childNodes);const childNodes = CircularJSON.parse(childNodesStr);const filterData = this.recursionNodes(childNodes);return filterData;}},/*** 递归遍历数据* 这里解释一下为什么要用CircularJSON这个插件，因为element tree* node数据存在一个对象里的子项存在循环引用，存在循环引用的对象*/recursionNodes(childNodes) {const nodes = childNodes;const result = [];for (const item of nodes) {if (item.visible) {result.push(item.data);}if (item.childNodes && item.childNodes.length) {const tempResult = this.recursionNodes(item.childNodes);item.data.children = tempResult;}}return result;},/*** 深拷贝*/deepClone(obj){return new Promise((resolve) => {const { port1,port2 } = new MessageChannel();port1.postMessage(obj);port2.onmessage = (msg) => {resolve(msg.data)}})}},}
</script>