el-tree懒加载状态下实现搜索筛选(纯前端）

1.效果图 

（1）初始状态

 

（2）筛选后 

2.代码 

1. <template>
2.   <div>
3.     <el-input
4.       placeholder="输入关键字进行过滤"
5.       v-model="filterText"
6.       @input="searchValue"
7.     >
8.     </el-input>
10.     <el-tree
11.       class="filter-tree"
12.       node-key="id"
13.       :lazy="!openAll"
14.       :load="loadNode"
15.       :data="dataTree"
16.       :props="defaultProps"
17.       :default-expand-all="openAll"
18.       ref="tree"
19.     >
20.     </el-tree>
21.   </div>
22. </template>
23. <script>
24. export default {
25.   data() {
26.     return {
27.       openAll: false,
28.       filterText: '',
29.       dataTree: [
30.         {
31.           id: 1,
32.           label: 'xx公司',
33.           children: [
34.             {
35.               id: 3,
36.               label: '公关',
37.               children: [
38.                 {
39.                   id: 6,
40.                   label: '张三'
41.                 },
42.                 {
43.                   id: 7,
44.                   label: '李四'
45.                 }
46.               ]
47.             },
48.             {
49.               id: 8,
50.               label: '公关领导'
51.             }
52.           ]
53.         },
54.         {
55.           id: 2,
56.           label: 'yy娱乐',
57.           children: [
58.             {
59.               id: 4,
60.               label: '王五'
61.             },
62.             {
63.               id: 5,
64.               label: '赵六'
65.             }
66.           ]
67.         }
68.       ],
69.       defaultProps: {
70.         children: 'children',
71.         label: 'label',
72.         isLeaf: 'isLeaf',
73.         id: 'id'
74.       },
75.       dataTree1: []
76.     }
77.   },
78.   created() {
79.     this.dataTree1 = JSON.parse(JSON.stringify(this.dataTree))
80.   },
81.   methods: {
82.     searchValue() {
83.       this.$nextTick(() => {
84.         if (
85.           this.filterText &&
86.           this.filterText !== '' &&
87.           this.filterText !== null
88.         ) {
89.           this.openAll = true
90.           //关闭懒加载
91.           this.$refs.tree.$data.store.lazy = false
92.           //全部展开
93.           this.$refs.tree.$data.store.defaultExpandAll = true
94.           //深拷贝
95.           let options = JSON.parse(JSON.stringify(this.dataTree))
96.           //清空
97.           this.$set(this, 'dataTree', [])
98.           //筛选要显示的节点
99.           this.searchTrees(options, this.filterText)
100.           //重新赋值
101.           this.$set(this, 'dataTree', options)
102.         } else {
103.           this.openAll = false
104.           this.$refs.tree.$data.store.lazy = true
105.           this.$refs.tree.$data.store.defaultExpandAll = false
106.           this.$set(this, 'dataTree', this.dataTree1)
107.         }
108.       })
109.     },
110.     //循环树筛选要显示的节点
111.     searchTrees(arr, val) {
112.       let flag = false
113.       if (arr && arr.length > 0) {
114.         for (let i = arr.length - 1; i >= 0; i--) {
115.           if (arr[i].children && arr[i].children.length > 0) {
116.             let tempflag = this.searchTrees(arr[i].children, val)
117.             if (tempflag == false) {
118.               arr.splice(i, 1)
119.             } else {
120.               flag = true
121.             }
122.           } else {
123.             if (arr[i].label.indexOf(val) === -1) {
124.               arr.splice(i, 1)
125.             } else {
126.               flag = true
127.             }
128.           }
129.         }
130.         return flag
131.       }
132.     },
133.     //懒加载(根据自己的数据来写)
134.     loadNode(node, resolve) {
135.       this.$nextTick(() => {
136.         if (this.openAll === false) {
137.           if (node.level === 0) {
138.             let topData = []
139.             this.dataTree.forEach(item => {
140.               topData.push({ label: item.label, id: item.id, isLeaf: false })
141.             })
142.             return resolve(topData)
143.           }
144.           //一级下拉
145.           if (node.level === 1) {
146.             let firstData = []
147.             this.dataTree.forEach(item => {
148.               if (item.id === node.data.id) {
149.                 item.children.forEach(e => {
150.                   firstData.push({
151.                     label: e.label,
152.                     id: e.id,
153.                     isLeaf: e.children ? false : true
154.                   })
155.                 })
156.               }
157.             })
158.             return resolve(firstData)
159.           }
160.           // 二级下拉
161.           if (node.level === 2) {
162.             let secondData = []
163.             this.dataTree.forEach(item => {
164.               item.children.forEach(e => {
165.                 if (e.id === node.data.id) {
166.                   e.children.forEach(i => {
167.                     secondData.push({
168.                       label: i.label,
169.                       id: i.id,
170.                       isLeaf: true
171.                     })
172.                   })
173.                 }
174.               })
175.             })
176.             return resolve(secondData)
177.           }
178.         }
179.       })
180.     }
181.   }
182. }
183. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。