el-select和el-tree相结合实现模糊查询

上一篇: 使用el-select和el-tree相结合实现下拉效果

一、实现的效果图

可能有些需求要求能够进行模糊查询功能,所以将上一篇使用el-select和el-tree相结合实现下拉效果文章进行了优化。

二、主要代码

1.template部分

代码如下（示例）：

1.filterable: 添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。
2.filter-method: 但如果我们需要使用其他搜索逻辑，需要用到filter-method方法。
3.filter-node-method: 在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。(官方文档说明)

2.方法部分

代码如下（示例）：

    typeFilter(value) {
      this.$refs.tree.filter(value)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }

---

欢迎评论留言,一起学习交流!