antd-vue的select組件實現既可以輸入添加，又可以下拉選擇

最近，項目中碰到需求，要求任務類型可以從下拉框（後台返回的數據）中選擇，也可以手動輸入添加新項，項目用的是antd-vue，所以最接近的組件就是a-select組件了，廢話不多說，改造方法如下：

HTML：

 1 <a-select
 2             show-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>
18           </a-select>

View Code

data定義：

1 data () {
2       return {
3         value:undefined,
4         typeData:[],//任務類型數組
5       }
6 }

View Code

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       },

View Code

效果圖如下：

PS：模糊查詢功能請自行完善

Tags:

VirMach 便宜 VPS

QNews

QNews