【AntdVue】select下拉框可输入搜索和添加
程序员文章站
2024-01-02 21:24:46
...
需求:
在antd select组件中,既能模糊搜索选择下拉框的选项,又能输入保存不存在的选项。
思路:
antd的select组件案例中,已经示范了怎么搜索选择。但是如果搜索不存在的选项,失焦后输入框内容会被清空,所以我们用提供的事件方法blur,去保留输入框内容。
输入内容时,触发search事件,获取的value值即为输入内容;在search事件内调用change事件,将value值赋给组件;在组件失焦时,将value输入框内容赋值给组件,防止被清空;增加选项可在在数据提交时做处理。
代码:
<!-- html -->
<a-select
placeholder="请选择"
v-model="selectValue"
:getPopupContainer="getPopupContainer()"
:options='barcodeOptions'
showSearch
:filter-option="false"
@blur="onBlur"
@change="onChange"
@search="onSearch"
/>
//change事件
onChange(value:any){
this.selectValue = value;
}
//search事件
onSearch(value:any){
this.onChange(value)
//搜索方法
//……
}
//blur事件
onBlur(value:any){
this.selectValue = value
}