ant desigin vue 中 a-select实现可输入可选择

项目需求,要实现在select选择实现可输入可选择操作,由于ant desigin vue官网文档未包含此功能,需要自己后续添加逻辑。参考自:antd中的a-select组件既可手动输入又可下拉选择_antd的select组件可以选择又可以输入-CSDN博客

<template>
  <div>
    {{newSoftName}}
    <a-select
        placeholder="请输入"
        v-model="newSoftName"
        show-search
        option-filter-prop="children"
        style="width: 300px"
        :filter-option="filterOption"
        @change="newHandleChange"
    >
      <a-select-option v-for="(item, index) in newSoftNameList" :key="index" :value="item">
        {{ item }}
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  data(){
    return{
      newSoftName:undefined,
      newSoftNameList:['1111','22222','33333']
    }

  },
  methods:{
    newHandleChange(value) {
      console.log(`selected ${value}`);
    },
    filterOption(input, option) {
      this.newSoftName = input
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值