900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 【AntdVue】select下拉框可输入搜索和添加

【AntdVue】select下拉框可输入搜索和添加

时间:2019-08-11 17:08:18

相关推荐

【AntdVue】select下拉框可输入搜索和添加

需求:

在antd select组件中,既能模糊搜索选择下拉框的选项,又能输入保存不存在的选项。

思路:

antd的select组件案例中,已经示范了怎么搜索选择。但是如果搜索不存在的选项,失焦后输入框内容会被清空,所以我们用提供的事件方法blur,去保留输入框内容。

输入内容时,触发search事件,获取的value值即为输入内容;在search事件内调用change事件,将value值赋给组件;在组件失焦时,将value输入框内容赋值给组件,防止被清空;增加选项可在在数据提交时做处理。

代码:

<!-- html --><a-selectplaceholder="请选择"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}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。