Ant-design-vue select组件可输入可下拉单选
//方法methods:{// 实现select选择框可下拉单选,也可输入赋值handleSearch(value){this.handleChange(value);},handleChange(value){this.value = value!=null && value !='' ? value : [];},handleBlur(value){this.value = v
·
//方法
methods:{
// 实现select选择框可下拉单选,也可输入赋值
handleSearch(value){
this.handleChange(value);
},
handleChange(value){
this.value = value!=null && value !='' ? value : [];
},
handleBlur(value){
this.value = value;
if(this.list.indexOf(value)==-1){
this.list.push(value);
}
},
}
//组件模板
<a-select :disabled="getlistLoading"
v-model='value'
:show-search="true"
:not-found-content="null"
:show-arrow="false"
:filter-option="true"
:autoClearSearchValue="false"
@search="handleSearch"
@blur="handleBlur"
@change="handleChange">
<a-select-option v-for="( item,index) in list" :key="item"> {{item}}</a-select-option>
</a-select>
//数据源
data(){
list:[],//下拉数据列表
value:'',//选择下拉列表中选项后的值
getlistLoading:false,//获取到下拉列表的数据前默认改选择器不可用
}
更多推荐
已为社区贡献1条内容
所有评论(0)