ElementUI select下拉框模糊搜索,选择下拉选项后,如何自动清除手动输入的内容呢?

问题描述:

有时候会有这样的一个需求,使用elementui 的select组件,要求有远程搜索,用户输入关键字后,自动查询后端接口返回相关下拉数据,当用户点击所需的下拉项后,要自动清除之前手动输入的内容,这样用户就可以继续手动输入新的内容来搜索新的下拉选项,elementUI的select组件,是当你选择完下拉项,失去焦点后才会自动清除之前输入的内容,如下图:

 

 

解决方法:

给select组件赋予ref属性,值自己定义,如下图所示

然后在change事件中,使用this.$refs.select来选定select  dom节点,其实打印该节点信息,会返回出一大串数据,其中有一个属性是query,可以看到它的值就是我们手动输入的内容,那么就手动将它的值置空,看看效果怎样

 

当选择下拉选项时,已经自动清空之前手动输入的内容啦!

 

  • 8
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值