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

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

效果如下:

代码如下:

  <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);
    }
  }