1、获取列表
interface OptionList {
label: string
value: string
}
let optionList = ref<Array<OptionList>>([])
const getShopList = async (shopName = '') => {
const params = { currentPage: 1, pageSize: 10000 }
try {
let { state, data, message: msg } = await accountApi.shopList(params)
if (state === 200) {
shopList.value = data.list
optionList.value = shopList.value.map(item => {
return {
label: item.shopName,
value: item.id,
}
})
} else {
message.error(msg)
}
} catch (error) {
message.error('网络请求发送失败~')
}
}
2、实现搜索,主要是这里的逻辑控制着搜索呢,你可以打印一下看看
const filterOption = (input: string, option: any) => {
return option.label.indexOf(input) >= 0
}
<span>请选择店铺:</span>
<a-select
v-model:value="selectedShop"
// 这三个配合即可实现搜索
show-search
:options="optionList"
:filter-option="filterOption"
// 这三个配合即可实现搜索
// 选中某个选项后,触发这个事件
@select="changeShop"
placeholder="请选择"
style="width: 150px"
></a-select>
AntDesign 的 select选择器添加搜索功能
于 2024-04-19 10:28:08 首次发布