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：模糊查詢功能請自行完善