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
    }

欢迎评论留言,一起学习交流!
评论 4 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

程序媛_文乐

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值