前端|element-ui中el-select下拉框数据过多，用pinyin-match实现拼音、首字母、汉字等模糊搜索前端|vue.js

人狠话不多，上图！ 【前端|element-ui中el-select下拉框数据过多，用pinyin-match实现拼音、首字母、汉字等模糊搜索】
文章图片

pinyin-match库也是项目需要，由于下拉框的数据过多，使用人员不好选择，就做个拼音，大小写字母以及汉字的模糊搜索，结果就找到来这个 pinyin-match库，能够使用拼音快速检索目标。特好用的，这个库的作者是个好心人啊，既然好东西也不能藏着，分享给大家！
在线演示：http://139.199.181.200:8686
在项目中的使用步骤第一步：安装pinyin-match

// 安装 pinyin-match npm install pinyin-match --save

第二步：在需要的组件中使用利用el-select的filterable 属性和filter-method方法使用模糊搜索

> export default{ data(){ return{ brand:[],//下拉框所有数据 copyBrand:[] } }, methods:{ //获取所有的品牌 async getBrand(){ const response = await reqLimitBranch() this.brand = response.data //把所有的品牌在赋值copyBrand this.copyBrand = this.brand }, //下拉框设置拼音模糊搜索 pinyingMatch(val){ const pinyingMatch = require('pinyin-match') if(val){ var result = [] // this.copyBrand.forEach( e => { var m = pinyingMatch.match(e.label, val) if( m){ result.push(e) } }) //搜索到相应的数据就把符合条件的n个数据赋值brand this.brand = result }else{ //没有搜索到数据，就还展示所有的brand this.brand = this.copyBrand } }, } }

这样就可以实现下拉框选择器的拼音、字母以及汉字的模糊搜索啦！试一下，有问题，可以交流哦！