element-tree搜索筛选,加载过滤出的父节点以及其所有子节点

灰太狼 2022-10-21 14:52 481阅读 0赞

## 需求: 使用element-tree实现部门的树状图, 并有搜索功能, 输入内容搜索出对应的部门,以及部门的所有子节点 ##

效果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70]  
代码如下:

<div> <div class="search"> <el-input placeholder="请输入内容" v-model="filterText" clearable> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </div> <el-tree class="filter-tree" :data="list" node-key="id" :default-expanded-keys="['']" :current-node-key="currentNode" :props="defaultAgentProps" :expand-on-click-node="false" :filter-node-method="filterNode" highlight-current @node-click="nodeClick" ref="tree" > <span class="custom-tree-node" slot-scope="{  node }"> <i class="el-icon-folder" style="margin-right:5px"></i>
            { {  node.label }}
          </span>
        </el-tree>
      </div>

methods:{ 
    	//因为需要筛选出过滤的父节点以及其所有子节点,只调用element-ui自带的方法只会返回对应的数据,因此需要进行改造筛选条件 filterNode(value, data, node) { 
          if (!value) return true;
          let _array = []; //这里使用数组存储 只是为了存储值。
          this.getReturnNode(node, _array, value);
          let result = false; _array.forEach(item => { 
            result = result || item;
          });
          return result;
        }, getReturnNode(node, _array, value) { 
          let isPass =
            node.data &&
            node.data.agentName &&
            node.data.agentName.indexOf(value) !== -1;
          isPass ? _array.push(isPass) : ""; if (!isPass && node.level != 1 && node.parent) { 
            this.getReturnNode(node.parent, _array, value);
          }
        },
    }
    
    //实现输入就进行筛选功能,进行监听该值的变化 watch: { 
        filterText(val) { 
          this.$refs.tree.filter(val);
        }
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70]: /images/20221021/3ff46d58ff6c4caa9d735a1d38179d07.png