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

HTML：

 1 
15             
16               {{ item.work_type }}
17             
18           

data定义：

1 data () {
2       return {
3         value:undefined,
4         typeData:[],//任务类型数组
5       }
6 }

methods方法：

 1  /**
 2        * @function 任务类型文本框的值变化时的回调
 3        * @author ***
 4        * @time 2020-08-17
 5        **/
 6       handleSearch (value) {
 7         this.handleChange(value);
 8       },
 9       /**
10        * @function 任务类型改变时的回调
11        * @author ***
12        * @time 2020-08-17
13        **/
14       handleChange (value) {
15         this.value = (!isNaN(value)&&value!='')?this.typeData[value].work_type:value;
16       },
17       /**
18        * @function 任务类型失焦事件
19        * @author ***
20        * @time 2020-08-17
21        **/
22       handleBlur(value) {
23         this.value=value;
24         this.model.workType = this.value;
25       },

后台接口返回的数据如下：

效果图如下：

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