引言 最近,来了个需求,需要在下拉列表中做筛选。下拉列表显示的是中文,但筛选时可能会输入中文的拼音首字母。因此,需要实现一个筛选功能,能够根据拼音首字母筛选出匹配的选项。 自定义筛选方法 前端使用的是 vue3 和 element-plus。我使用的组件是 Select 选择器 | Element Plus 。为 el-select 添加 filterable 属性即可启用搜索功能。默认情况下,Select 会找出所有 label 属性包含输入值的选项。但这里需要匹配拼音首字母进行搜索,因此要通过传入一个 filter-method 来实现。filter-method 是一个函数,它会在输入值发生变化时调用,参数为当前输入值。 下面是这部分的简短代码: vue部分: <el-select v-model="queryParams.word" filterable placeholder="请输入" clearable :filter-method="filterMethod" > <el-option v-for="word in words" :key="word" :label="word" :value="word" /></el-select>/el-form-item> JS部分: const showSearch = ref(true);// option选项const words = ref(['你好', '世界', '中国', '中国最棒'])// 保留原始的option选项const wordsOld = ref(['你好', '世界', '中国', '中国最棒'])const data = reactive({ queryParams: { word: null, },});const { queryPa...