ant-design-vue的Select选择器的输入筛选效果

问题描述

很多时候，我们下拉选择器的选择项是由后台数据提供的。

简单的下拉选择只适用于数据量较小的情况；

大量数据的处理需要配合筛选功能，我们在输入的时候，就自动过滤出符合的数据，这样数据量大大减少，我们在选择的时候就会更加方便。

问题分析

既然用人家的组件，官方文档是少不得看了。

这可谓：刚想瞌睡就有人送上了枕头。
效果就是这么个效果，具体怎么用还得看一下api。

optionFilterProp：

搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索

也就是：option-filter-prop="children"

filterOption：

是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。

这里呢，肯定是按照函数处理。在函数内部，我们对内嵌内容进行筛选返回。
也就是：

filterOption(input, option) {
    return XX;
},

问题解决

使用组件的时候：

<a-select placeholder="请选择名称" show-search option-filter-prop="children" :filter-option="filterOption">
   <a-select-option :value="item.examId" v-for="(item, inde) in examList" :key="inde"> {{ item.examName }} </a-select-option>
</a-select>

方法：

//名称下拉选择输入过滤
filterOption(input, option) {
  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
},

效果展示

初始状态：

筛选后：

问题解决，这种是筛选后直接返回的，组件也有提供带远程搜索、加载状态的组件内容，效果更趋于用户的交互体验：
一个带有远程搜索，节流控制，请求时序控制，加载状态的多选示例

官方的文档官方的话，若有问题就找它。配置参数看看清，配置说明指定行。
配置项：https://1x.antdv.com/components/select-cn/#API

这里是飞鱼爱吃米，只授渔，不授鱼！