【ant-design-vue】a-select无法清空的解决
·
版本:^3.0.0
<a-select
v-model="selectValue"
:options="options"
show-search
placeholder="输入内容"
:filter-option="false"
@search="handleSearch"
@change="handleChange"
>
<template v-if="fetching" #notFoundContent>
<a-spin size="small" />
</template>
</a-select>
需求是在选择的值不满足要求的时候,不做任何处理,清空select,但是意外发现selectValue竟然无法清空,在dom里面也打印了selectValue,发现明明是''了,但是a-select里面却还是有值
let selectValue = ref('')
const handleChange = () => {
if() {
selectValue.value = ''
return false
}
}
解决:原因是啥不清楚,给v-model="selectValue"改成v-model:value="selectValue"就行了
<a-select
v-model:value="selectValue"
:options="options"
show-search
placeholder="输入内容"
:filter-option="false"
@search="handleSearch"
@change="handleChange"
>
<template v-if="fetching" #notFoundContent>
<a-spin size="small" />
</template>
</a-select>
注意:但这会带来一个新的问题,placeholder里面的文字不显示了,这是因为:placeholder的作用是当selectValue值为空时显示的替换文本,但是默认值给''和null都会被视为有值,所以把selectValue的初始值改成undefined
let selectValue = ref(undefined)
const handleChange = () => {
if() {
selectValue.value = undefined
return false
}
}
还有一个诡异的问题:就是使用v-model:value,如果options的label是由文字+数字拼成的,在远程搜索的时候,搜时能搜,但是选中以后,不会触发change事件,但是改成v-model就好了。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)