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

时间:2024-04-02 19:58:32

问题描述:

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

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

 

 

解决方法:

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

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

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

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

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

 

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

 

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