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方法使用模糊搜索

<template>
	<el-select v-model="formInline.brandId" @change="changeBrand" filterable :filter-method="pinyingMatch" placeholder="请选择"  style="width: 180px" >
	   <el-option :label="item.label" :value="item.value" v-for="(item,index ) in brand" :key="item.value"></el-option>
	</el-select>
</template>

<script>
    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
		         }
		      },
        }
    }
    
</script>

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