Element-UI下拉框el-select实现拼音搜索
需求:用户要求输入拼音、中文、字母过滤下拉框内容。
需求分析:element有自带搜索功能,支持汉字、字母搜索,拼音需要引入第三方插件。下面引入 pinyin-match实现需求。
解决过程:
- 安装 npm install pinyin-match --save
- 引入 import pinyin from “pinyin-match”;
- 需要给el-select添加自定义搜索方法 filterable(可输入) :filter-method=“pinyingMatch”(自定义搜索方法);
<template>
<el-select
filterable
:filter-method="(query)=>{pinyingMatch(query, data)}"
@focus="focus"
v-model=&#