背景
记录一下
大屏项目中,下拉数据过多,想使用下拉搜索功能;
输入汉字,匹配对应的项目;
解决方案
关键代码如下:
a-select控件
<a-select
v-model:value="state.schemeInfo.monitorList"
show-search
:options="state.monitorOptions"
:filter-option="monitorFilterOption"
@change="onSelectIndex"
></a-select>
projectFilterOption 匹配事件
const projectFilterOption = (input: string, option: any) => {
const label = state.polderOptions.find(item => item.value === option.value)?.label || ''
// 根据label来过滤
return label.toLowerCase().includes(input.toLowerCase())
}