antd-vue的select组件实现既可以输⼊添加，⼜可以下拉选择
最近，项⽬中碰到需求，要求任务类型可以从下拉框（后台返回的数据）中选择，也可以⼿动输⼊添加新项，项⽬⽤的是antd-vue，所以最接近的组件就是a-select组件了，废话不多说，改造⽅法如下：
HTML：
1<a-select
2show-search
3            :value="value"
4            optionLabelProp='children'
5:autoClearSearchValue="false"
6            placeholder="请选择或输⼊任务类型"
7            :default-active-first-option="false"
8            :show-arrow="false"
9            :filter-option="true"
10            :not-found-content="null"
11            @search="handleSearch"
12            @blur="handleBlur"
13            @change="handleChange"
14>
15<a-select-option v-for="(item,index) in typeData" :key="index">
16              {{ item.work_type }}
17</a-select-option>
antdesignvue 表格合计18</a-select>
View Code
data定义：
1 data () {
2return {
3        value:undefined,
4        typeData:[],//任务类型数组
5      }
6 }
View Code
methods⽅法：
1/**
2      * @function 任务类型⽂本框的值变化时的回调
3      * @author ***
4      * @time 2020-08-17
5      **/
6      handleSearch (value) {
7this.handleChange(value);
8      },
9/**
10      * @function 任务类型改变时的回调
11      * @author ***
12      * @time 2020-08-17
13      **/
14      handleChange (value) {
15this.value = (!isNaN(value)&&value!='')?peData[value].work_type:value;
16      },
17/**
18      * @function 任务类型失焦事件
19      * @author ***
20      * @time 2020-08-17
21      **/
22      handleBlur(value) {
23this.value=value;
25      },
View Code
后台接⼝返回的数据如下：
效果图如下：
PS：模糊查询功能请⾃⾏完善

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。