vue中el-tree树形组件利用filter和 filterNode方法实现模糊搜索

实现效果：

初始状态：

 模糊搜索效果：

 实现方法：

template中：

<el-input
  placeholder="输入关键字"
  v-model="filterText">
</el-input>

<el-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>

对输入框的输入值设置监听：

filter

对树节点进行筛选操作

接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数

 watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }

filterNode方法为element组件中针对树形组件封装好的方法，用来实现树形组件的模糊搜索。传统的模糊搜索方法如vue纯前端实现模糊查询，使用filter和indexOf_刚刚好ā的博客-CSDN博客仅能实现最外层父节点的搜索，针对树形中子节点的搜索却不能实现。

 methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },

这样就实现了上述效果。本文参考了Element官方文档Element - The world's most popular Vue UI framework。里面有更多详细介绍！