人狠话不多,上图!
pinyin-match库
也是项目需要,由于下拉框的数据过多,使用人员不好选择,就做个拼音,大小写字母以及汉字的模糊搜索,结果就找到来这个 pinyin-match库,能够使用拼音快速检索目标。特好用的,这个库的作者是个好心人啊,既然好东西也不能藏着,分享给大家!
在线演示:http://laosep.top/pinyin-match/
在项目中的使用步骤
第一步:安装pinyin-match
// 安装 pinyin-matchnpm 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//把所有的品牌在赋值copyBrandthis.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>
这样就可以实现下拉框选择器的拼音、字母以及汉字的模糊搜索啦!试一下,有问题,可以交流哦!