问题描述:
有时候会有这样的一个需求,使用elementui 的select组件,要求有远程搜索,用户输入关键字后,自动查询后端接口返回相关下拉数据,当用户点击所需的下拉项后,要自动清除之前手动输入的内容,这样用户就可以继续手动输入新的内容来搜索新的下拉选项,elementUI的select组件,是当你选择完下拉项,失去焦点后才会自动清除之前输入的内容,如下图:
解决方法:
给select组件赋予ref属性,值自己定义,如下图所示
然后在change事件中,使用this.$refs.select来选定select dom节点,其实打印该节点信息,会返回出一大串数据,其中有一个属性是query,可以看到它的值就是我们手动输入的内容,那么就手动将它的值置空,看看效果怎样
当选择下拉选项时,已经自动清空之前手动输入的内容啦!