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

需求:

在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
}

  • 0
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值