首页 > 其他分享> > ant design vue带有远程搜索,节流控制,请求时序控制,加载状态的下拉选择框a-select 与 a-select-option 踩坑,清除后placeholder不显示
ant design vue带有远程搜索,节流控制,请求时序控制,加载状态的下拉选择框a-select 与 a-select-option 踩坑,清除后placeholder不显示
作者:互联网
<template>
<a-select
allowClear
:value="value"
@search="fetchData"
@change="selectChange"
:placeholder="holder"
:not-found-content="fetching ? undefined : '暂无数据'"
:filterOption="false"
:getPopupContainer="triggerNode => triggerNode.parentNode"
:showSearch="true"
style="width: 100%"
>
<a-spin v-if="fetching" slot="notFoundContent" size="small"></a-spin>
<a-select-option v-for="item in selectData" :key="item.key">{{ item.value }}</a-select-option>
</a-select>
</template>
props: {
value: {
default: undefined
},
},
// 父组件:
change(value) {
this.form.userValue = value ? value.key : undefined;
}
Select props
-
value(v-model)
-
allowClear
在点击×清除value后,placeholder不显示,原因是value的default没有设置成undefined,同时,点击×后,触发change方法,value值为undefined,再把绑定的value赋值为undefined才对。
标签:vue,undefined,value,ant,change,props,placeholder,select 来源: https://blog.csdn.net/MrChkk/article/details/120486122