Ant Design Vue --- select组件静态实现模糊搜索
使用的数据未带有label和value字段的情况下,实现前端静态模糊搜索
如果没有使用a-select-option的情况下,我们只需要把源数据使用map方法加上label和value即可
如果使用了a-select-option标签,那么就在a-select-option标签上定义key或者label即可,这样在filterOption函数的option就可以拿到key或者label,然后就可以自定义过滤了
示例
<a-form-item name="serviceUserName" ref="serviceUserName" :label-col="{ 'span': 4 }">
<template #label>
<span><span style="color: red;">*</span>短信模板</span>
</template>
<a-select
size="small"
v-model:value="data.templateId"
placeholder="请选择短信模板"
="selectChange('templateId', data.templateId)"
show-search
:filter-option="filterOption"
allowClear
>
<a-select-option
v-for="item in data.messagetemplateData"
:value="item.templateId"
:label="item.name"
>{{ item.name }}</a-select-option>
</a-select>
</a-form-item>
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};