场景描述:当el-select为multiple多选模式时,使用filterable属性支持在下拉列表进行搜索,且当选择一个下拉项时还能在下拉列表保持当前的搜索结果。
如下:输入测试,下拉列表展示包含测试的子项
勾选一个子项,在后面还保存显示搜索关键字“测试”(该功能是使用reserve-keyword属性进行保存的)
现在的场景是我们是不需要显示这个搜索关键字,并且还保留之前的关键字搜索结果
可以这样实现:
<el-select v-model="value" placeholder="请选择" multiple filterable reserve-keyword @change="onSelectChange" ref="el-select">
<el-option label="黄金糕" value="黄金糕"></el-option>
<el-option label="龙须面" value="龙须面"></el-option>
<el-option label="北京烤鸭" value="北京烤鸭"></el-option>
</el-select>
// 清除el-select搜索文本框的值query
onSelectChange() {
this.$refs['el-select'].query = ''
},