iview组件库中的的Tree组件实现深度查询:
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 = final14 } 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 }
2.实现勾选节点全局去重
全局去重:1.获得已勾选的标签数组 getCheckedNodes,以直线的属性结构展示2.判断 checkedAllNode 中是否有标签 a,若有,首先对 已勾选数组 getCheckedNodes 进行拼接过滤得到 boolStrList ,再将所有标签数组和已勾选数组进行计算,得到已勾选数组中的交集 intersectionNode ,将 intersectionNode 交集 push 到 checkedAllNode , b,若没有,对已勾选的数组进行拼接过滤得到 boolStrList ,再把 boolStrList 赋值给 checkedAllNode , 当前勾选的数组 getCheckedNodes 当前勾选格式化的数组 boolStrList 所有选中的数组 checkedAllNode 当前勾选的交集 intersectionNode 3.循环 intersectionNode ,将拼接好的DOM结构追加到最后一个容器删除单个1.获取当前标签节点的 labelstr ,使用 filter 对所有标签数组进行过滤,找到相同的 labelstr 对象删除掉2.remove 当前标签节点的DOM删除多个1.循环当前容器所有标签,得到 labelstr 数组 ,使用 filter 对所有标签数组进行过滤,找到相同的 labelstr 对象删除掉2.remove 当前容器DOM问题1.可能存在父节点下面的子节点标签 循环 checkedAllNode ,若存在 children
1 add:function(){ 2 var that = this; 3 let boolStrList = []; //拼接过滤 4 let intersectionNode = []; // 当前勾选的交集 5 let finalArray = []; 6 let str = ''; 7 let getCheckedNodes = that.$refs.tree.getCheckedNodes(); 8 if (getCheckedNodes.length < 1) { 9 return; 10 } 11 12 boolStrList = that.addBoolStrList(getCheckedNodes); 13 if(checkedAllNode.length > 0){ 14 intersectionNode = filterArray.intersection(checkedAllNode,boolStrList); 15 finalArray = checkedAllNode.concat(intersectionNode); 16 checkedAllNode = finalArray; 17 console.log(checkedAllNode); 18 }else{ 19 checkedAllNode = intersectionNode = boolStrList; 20 } 21 for (let i = 0; i < intersectionNode.length; i++) { 22 if (intersectionNode[i].label.length < 2) { // 如果标签名称的字符长度小于2,则把父级的标签名称拼接上,labelstr有所有的父级 23 intersectionNode[i].label = intersectionNode[i].labelstr.split('_').slice(-2).join('_'); 24 } 25 str += '' + intersectionNode[i].label + 28 ''; 29 } 30 $("#type-content div").last().append(str); 31 that.cancelChecked(); 32 }, 33 addBoolStrList: function(data) { 34 let boolList = []; 35 for (let i = 0; i < data.length; i++) { 36 if (!data[i].disableCheckbox) { 37 boolList.push({ 38 labelstr: data[i].labelstr, 39 hasScore: data[i].hasScore, 40 id:data[i].id, 41 label: data[i].title, 42 score1: data[i].score1, 43 score2: data[i].score2 44 }); 45 i += this.skipStep(data[i]); 46 } 47 } 48 return boolList; 49 }, 50 skipStep: function(data) { 51 let step = 0; 52 let node = data.children; 53 let l = node && node.length; 54 let count = 0; 55 step += l; 56 while (node && count < node.length) { 57 step += this.skipStep(node[count++]); 58 } 59 return step; 60 }, 61 arrFunc: function(arr1, arr2) { 62 for (let i = 0; i < arr1.length; i++) { 63 for (let j = 0; j < arr2.length; j++) { 64 //判断添加的数组是否为空了 65 if (arr1.length > 0) { 66 if (arr1[i]["labelstr"] == arr2[j]["labelstr"]) { 67 arr1.splice(i, 1); //利用splice函数删除元素,从第i个位置,截取长度为1的元素 68 } 69 } 70 } 71 } 72 for (let n = 0; n < arr2.length; n++) { 73 arr1.push(arr2[n]); 74 } 75 return arr1 76 }, 77 var filterArray = { 78 removeDuplicate: function (arr1, arr2) { 79 var json = arr1.concat(arr2); //两个数组对象合并 80 var newJson = []; //盛放去重后数据的新数组 81 for(item1 of json){ //循环json数组对象的内容 82 var flag = true; //建立标记,判断数据是否重复,true为不重复 83 for(item2 of newJson){ //循环新数组的内容 84 if(item1.id==item2.id){ //让json数组对象的内容与新数组的内容作比较,相同的话,改变标记为false 85 flag = false; 86 } 87 } 88 if(flag){ //判断是否重复 89 newJson.push(item1); //不重复的放入新数组。 新数组的内容会继续进行上边的循环。 90 } 91 } 92 return newJson; 93 }, 94 intersection: function(arr1, arr2) { 95 //求交集 96 var arr1Id = []; 97 arr1.forEach(function(item){ 98 arr1Id.push(item.labelstr) 99 });100 let arr3 = arr1.concat(arr2);101 let final = arr3.filter(function(v){102 return arr1Id.indexOf(v.labelstr)===-1103 });104 return final105 },106 };