iview Tree组件实现深度查询

佚名 6年前 (2019-05-09) 随笔 1079人围观抢沙发百度已收录

iview组件库中的的Tree组件实现深度查询：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　1.精确匹配第一个符合条件的节点，并返回整条数据链

　　2.展开当前节点

 1 efficientSearch: function () {
 2   var self = this;
 3   console.log(self.$refs.tree)
 4   if (!self.efficientSearchData) {
 5     return
 6   }
 7   if (!self.searchWord) {
 8     self.getTag()
 9   }
10   var final = self.variableDeepSearch(self.efficientSearchData, [], self.searchWord); // 返回符合条件的对象
11   if (final) {
12     self.treeData = []
13     self.treeData = final
14   } else {
15     self.treeData = []
16   }
17 
18 
19 },
20 variableDeepSearch: function(treeDataFilter, childTemp, searchWord) {
21   var that = this;
22   for (let i = 0; i < treeDataFilter.length; i++) {
23     let item = treeDataFilter[i]
24     if (item.title == searchWord) {
25       if (childTemp.length == 0) {
26         item.expand = true;
27         childTemp.push(item);
28       }
29       return childTemp;
30     }
31     if (item.children && item.children.length > 0) {
32       item.expand = true;
33       childTemp.push(item);
34       let rs = that.variableDeepSearch(item.children, childTemp, searchWord);
35       if (rs) {
36         return rs;
37       } else {
38         let index = childTemp.indexOf(item);
39         if (index > -1) {
40           childTemp.splice(index, 1);
41         }
42       }
43     }
44   }
45 }