el-tree树形节点过滤

需求：

1.获取到节点数据的情况下勾选节点，勾选的结果展示在右侧列表，点击左侧X可删除勾选，鼠标放上结果列时展示节点路径和id，比如：“父节点>子节点”；

2.节点上方输入框可模糊搜索节点名称和id,要求：1、搜索到父目录时子节点不要过滤，父目录不打开。2、搜索到子目录时，父目录默认打开

原型如下：

 1.首先，要实现显示节点路径，使用递归为每个节点拼接路径，子节点的路径为：父路径+子节点名称，一直往下层级相加。

let datas = res.data.data;
datas.forEach(value => {
   value.tagId = value.id;
   value.tagName = value.name;  
   value.tagIdPath = value.name;
   value = this.setData(value,value.id);
   if (value.isChoose) {//回显保存的频道,isChoose旧字段，后端已废弃，不用管
      this.checked.push(value.id);
      this.selectList.push(value);
    }
    if(this.activeLabel.length>0){//补充路径，用于回显
      this.activeLabel.forEach(item=>{
         if(value.tagId==item.tagId){
             item.tagIdPath = value.tagIdPath
             }
           }) 
       }
    });
this.data = datas;

递归：

setData(data){
  if(data.child && data.child.length>0){
    data.child.forEach(item=>{
      item.tagId = item.id;
      item.tagName = item.name;  
      item.tagIdPath = data.tagIdPath+'>'+item.tagName;
      item = this.setData(item);
     })
     return data;
    }else{
      return data;
    }
  },

效果如下：

2.要实现需求中的过滤效果，首先 根据查询节点Node存在属性expanded为true表示打开节点，false表示关闭节点，that.$refs.tree.filter(that.filterText);手动触发tree的过滤方法，在methods中写filterNode函数，会依次过滤tree中的每个节点，类似于数组中的filter。nodeExpend保存过滤到的节点信息id，data.tagIdPath.indexOf(value)!=-1表示过滤到父节点时子节点不用被过滤

filterNode(value, data) {//依次过滤每个不符合的数据
          // console.log('value',value);
          //console.log('data',data);
            if(value && (data.name.indexOf(value) !== -1 || (data.id+'').indexOf(value)!=-1)){
               this.nodeExpend.push(data.id);//去除重复
            }
            if (!value) return true;
            return data.name.indexOf(value) !== -1 || (data.id+'').indexOf(value)!=-1 || data.tagIdPath.indexOf(value)!=-1;//名称或者id模糊搜索
        },

3.输入框输入时监听filterTextInput防抖触发过滤事件，然后判断过滤到哪个位置，是到了父节点还是到了子节点，到了父节点父节点默认不展开，父节点的父节点展开。this.$refs.tree.store.nodesMap获取所有节点信息

filterTextInput() {//防抖
        let that = this;
        that.treeLoading = true;
        this.nodeExpend = [];
        if(this.timeout){
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            //that.treeLoading = true;
            that.$refs.tree.filter(that.filterText);
            that.treeLoading = false;
            var nodes = this.$refs.tree.store.nodesMap;
            //console.log('nodeExpend',this.nodeExpend);
            let parentNodeList = [];
            for (var i in nodes) {
              nodes[i].expanded = false;
              if(this.nodeExpend.indexOf(nodes[i].data.id)!=-1){
                //console.log('node[i]',nodes[i]);
                parentNodeList.push(nodes[i]);
              }
            }
            parentNodeList.forEach(item=>{
              console.log(item.data.name);
              //item.expanded = true;
              this.setExpanded(item);
            })
          }, 1000);
        }else{
          this.timeout = setTimeout(() => {
            //that.treeLoading = true;
            that.$refs.tree.filter(that.filterText);
            that.treeLoading = false;
            var nodes = this.$refs.tree.store.nodesMap;
            //console.log('nodeExpend',this.nodeExpend);
            let parentNodeList = [];
            for (var i in nodes) {
              nodes[i].expanded = false;
              if(this.nodeExpend.indexOf(nodes[i].data.id)!=-1){
                //console.log('node[i]',nodes[i]);
                parentNodeList.push(nodes[i]);
               
              }
            }
            parentNodeList.forEach(item=>{
              console.log(item.data.name);
              //item.expanded = true;
              this.setExpanded(item);
            })
          }, 1000);
        }
      },
      setExpanded(data){
        if(data.parent){
          //console.log('parent',data.parent.data.name);
          data.parent.expanded = true;
          this.setExpanded(data.parent);
        }else{
          return;
        }
      },

结果：

1.查询到父节点，父节点默认不展开，子节点不过滤掉

2.查询到子节点，父节点默认展开