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

本文链接：https://blog.csdn.net/qq_53608274/article/details/138891689

项目需求，要实现在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>