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

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

最近，项目中要求a-table列表中单价字段可以从下拉框（后台返回的数据）中选择，也可以手动输入添加下拉框没有的内容，项目用的是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方法：

getPrice(item, list, value) {
 let a = { Price: value }
 for (let i = 0; i < list.length; i++) {
   if (list[i].item == item) {
     let Price = list[i].Price == '' ? value : list[i].Price
     a.Price = Price
   }
 }
 return a
},
setEstimate(value, index, list) {
 this.clickPurContract[index].estimatePrice = value
 let a = this.getPrice(this.clickPurContract[index].estimatePrice, list, value)
},
handleSearch(value, index, list) {
 this.setEstimate(value, index, list)
},
handleBlur(value, index, list) {
 this.setEstimate(value, index, list)
},

效果图如下：