antd-vue的select组件实现既可以输入添加，又可以下拉选择

最近，项目中碰到需求，要求任务类型可以从下拉框（后台返回的数据）中选择，也可以手动输入添加新项，项目用的是antd-vue，所以最接近的组件就是a-select组件了，废话不多说，改造方法如下：

HTML：

 <a-select
             show-search
             :value="value"
             optionLabelProp='children'
             :autoClearSearchValue="false"
             placeholder="请选择或输入任务类型"
             :default-active-first-option="false"
             :show-arrow="false"
             :filter-option="true"
             :not-found-content="null"
             @search="handleSearch"
             @blur="handleBlur"
             @change="handleChange"
           >
             <a-select-option v-for="(item,index) in typeData" :key="index">
               {{ item.work_type }}
             </a-select-option>
           </a-select>

data定义：

 data () {
       return {
         value:undefined,
         typeData:[],//任务类型数组
       }
 }

methods方法：

  /**
        * @function 任务类型文本框的值变化时的回调
        * @author ***
        * @time 2020-08-17
        **/
       handleSearch (value) {
         this.handleChange(value);
       },
       /**
        * @function 任务类型改变时的回调
        * @author ***
        * @time 2020-08-17
        **/
       handleChange (value) {
         this.value = (!isNaN(value)&&value!='')?this.typeData[value].work_type:value;
       },
       /**
        * @function 任务类型失焦事件
        * @author ***
        * @time 2020-08-17
        **/
       handleBlur(value) {
         this.value=value;
         this.model.workType = this.value;
       },

效果图如下：

PS：模糊查询功能请自行完善