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

最近，项目中要求单价可以从下拉框（后台返回的数据）中选择，也可以手动输入添加新项，项目用的是antd-vue，所以最接近的组件就是a-select组件了，改造方法如下：
HTML 代码：

    <a-table
	    :columns="columnsContract"
	    :dataSource="clickPurContract"
	    :pagination="false"
	    :scroll="{ x: 'max-content' }"
	    size="small"
	    bordered
    >
      <template v-for="col1 in ['estimatePrice']" :slot="col1" slot-scope="text, record, index">
        <a-select
          @change="setEstimate($event, index, record.materialPrice)"
          @search="handleSearch($event, index, record.materialPrice)"
          @blur="handleBlur($event, index, record.materialPrice)"
          :filterOption="filterOption"
          defaultValue="--请选择--"
          showSearch
          :allowClear="true"
          v-model="clickPurContract[index].estimatePrice">
          <a-select-option v-for="item in record.materialPrice" :key="item.id">
              {{ item.TextEs }}
          </a-select-option>
        </a-select>
      </template>
    </a-table>

data定义：

data() {
  return {
   columnsContract: [{
       title: '单价',
       dataIndex: 'estimatePrice',
       className: 'columnsColor',
       scopedSlots: { customRender: 'estimatePrice' },
    }],
    clickPurContract:[{
      materialPrice:[{
      	id:"",
        TextEs:""
      }],
      estimatePrice:"",
    }],
  }
 }

methods方法：

getPriceById(id, list, value) {
 let a = { realPrice: value }
 for (let i = 0; i < list.length; i++) {
   if (list[i].id == id) {
     let realPrice = list[i].realPrice == '' ? value : list[i].realPrice
     a.realPrice = realPrice
   }
 }
 return a
},
setEstimate(value, index, list) {
 this.clickPurContract[index].estimatePrice = value
 let a = this.getPriceById(this.clickPurContract[index].estimatePrice, list, value)
 this.clickPurContract[index].tax = a.tax
 this.$forceUpdate()
},
handleSearch(value, index, list) {
 this.setEstimate(value, index, list)
},
handleBlur(value, index, list) {
 this.clickPurContract[index].estimatePrice = value
},

效果图如下：