iview Tree组件实现深度查询

 

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

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

　　2.展开当前节点

efficientSearch: function () {
  var self = this;
  console.log(self.$refs.tree)
  if (!self.efficientSearchData) {
    return
  }
  if (!self.searchWord) {
    self.getTag()
  }
  var final = self.variableDeepSearch(self.efficientSearchData, [], self.searchWord); // 返回符合条件的对象
  if (final) {
    self.treeData = []
    self.treeData = final
  } else {
    self.treeData = []
  }


},
variableDeepSearch: function(treeDataFilter, childTemp, searchWord) {
  var that = this;
  for (let i = 0; i < treeDataFilter.length; i++) {
    let item = treeDataFilter[i]
    if (item.title == searchWord) {
      if (childTemp.length == 0) {
        item.expand = true;
        childTemp.push(item);
      }
      return childTemp;
    }
    if (item.children && item.children.length > 0) {
      item.expand = true;
      childTemp.push(item);
      let rs = that.variableDeepSearch(item.children, childTemp, searchWord);
      if (rs) {
        return rs;
      } else {
        let index = childTemp.indexOf(item);
        if (index > -1) {
          childTemp.splice(index, 1);
        }
      }
    }
  }
}

 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 

 

 add:function(){
        var that = this;
        let boolStrList = []; //拼接过滤
        let intersectionNode = [];  // 当前勾选的交集 
        let finalArray = [];
        let str = '';
        let getCheckedNodes = that.$refs.tree.getCheckedNodes();
        if (getCheckedNodes.length < 1) {
          return;
        }
        
        boolStrList = that.addBoolStrList(getCheckedNodes);
        if(checkedAllNode.length > 0){
          intersectionNode = filterArray.intersection(checkedAllNode,boolStrList);
          finalArray = checkedAllNode.concat(intersectionNode);
          checkedAllNode = finalArray;
          console.log(checkedAllNode);
        }else{
          checkedAllNode = intersectionNode = boolStrList;
        }
        for (let i = 0; i < intersectionNode.length; i++) {
          if (intersectionNode[i].label.length < 2) { // 如果标签名称的字符长度小于2，则把父级的标签名称拼接上,labelstr有所有的父级
            intersectionNode[i].label = intersectionNode[i].labelstr.split('_').slice(-2).join('_');
          }
          str += '<span class="select-label" data-id=' + '"' + intersectionNode[i].id + '"' + ' data-score1=' + '"' + intersectionNode[i].score1 + '"' + ' data-score2=' + '"' +
              intersectionNode[i].score2 + '"' + '  data-hasScore=' + '"' + intersectionNode[i].hasScore + '"' + ' data-labelstr=' +
              intersectionNode[i].labelstr + '>' + intersectionNode[i].label +
              '<span class="singleBtn" onclick="singleDel(this)"></span></span>';
        }
        $("#type-content div").last().append(str);
        that.cancelChecked();
      },
 addBoolStrList: function(data) {
        let boolList = [];
        for (let i = 0; i < data.length; i++) {
          if (!data[i].disableCheckbox) {
            boolList.push({
              labelstr: data[i].labelstr,
              hasScore: data[i].hasScore,
              id:data[i].id,
              label: data[i].title,
              score1: data[i].score1,
              score2: data[i].score2
            });
            i += this.skipStep(data[i]);
          }
        }
        return boolList;
      },
      skipStep: function(data) {
        let step = 0;
        let node = data.children;
        let l = node && node.length;
        let count = 0;
        step += l;
        while (node && count < node.length) {
          step += this.skipStep(node[count++]);
        }
        return step;
      },
 arrFunc: function(arr1, arr2) {
        for (let i = 0; i < arr1.length; i++) {
          for (let j = 0; j < arr2.length; j++) {
            //判断添加的数组是否为空了
            if (arr1.length > 0) {
              if (arr1[i]["labelstr"] == arr2[j]["labelstr"]) {
                arr1.splice(i, 1); //利用splice函数删除元素，从第i个位置，截取长度为1的元素
              }
            }
          }
        }
        for (let n = 0; n < arr2.length; n++) {
          arr1.push(arr2[n]);
        }
        return arr1
      },
var filterArray = {
    removeDuplicate: function (arr1, arr2) {
        var json = arr1.concat(arr2); //两个数组对象合并
        var newJson = []; //盛放去重后数据的新数组
        for(item1 of json){  //循环json数组对象的内容
            var flag = true;  //建立标记，判断数据是否重复，true为不重复
            for(item2 of newJson){  //循环新数组的内容
                if(item1.id==item2.id){ //让json数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
                    flag = false;
                }
            }
            if(flag){ //判断是否重复
                newJson.push(item1); //不重复的放入新数组。  新数组的内容会继续进行上边的循环。
            }
        }
        return newJson;
    },
    intersection: function(arr1, arr2) {
        //求交集
        var arr1Id = [];
        arr1.forEach(function(item){
            arr1Id.push(item.labelstr)
        });
        let arr3 = arr1.concat(arr2);
        let final = arr3.filter(function(v){
            return arr1Id.indexOf(v.labelstr)===-1
        });
        return final
    },
};