Antd Select实现即可搜索又可输入
Antd Select如何实现即可搜索又可输入的操作1、进入Select组件随便找一个合适的组件 (不一定如图)2、删除组件中冗余代码 删除后如下<a-selectv-model:value="name"show-searchplaceholder="Select a person"style="width: 200px":options="options"//添加search事件@sear
·
Antd Select如何实现即可搜索又可输入的操作
1、进入Select组件随便找一个合适的组件 (不一定如图)
2、代码删除后简洁如下 change focus等事件根据需求添加
<a-select
v-model:value="name"
show-search
placeholder="Select a person"
style="width: 200px"
:options="options"
//添加search事件
@search="fetchName"
>
</a-select>
3、方法中使用
options = [
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'tom', label: 'Tom' }
]
// 查询商品全称
const fetchName= (value) => {
//这一步是核心
//判断value是否存在 如果存在就把赋值给name, 这样select失去焦点后 不会清空输入信息
if (value) {
state.name = value
}
//下面根据业务需求放查询请求
....
}
这样就实现了即可搜索又可输入的操作
更多推荐
已为社区贡献1条内容
所有评论(0)