需求：用户要求打出首字母就能搜索到内容，而不是打汉字。
环境：node 14 vue2 vue-cli 4.5
需求分析：element自带搜索功能，支持汉字搜索，拼音的话需要引入第三方插件了。经过实验 pinyin-match完美实现。
解决过程：
首先安装 npm install pinyin-match --save
全局引用和局部引用皆可，这里我们使用了局部引用
import pinyin from "pinyin-match";
给select标签添加
filterable :filter-method="pinyingMatch"
添加自定义搜索方法,直接复制即可
pinyingMatch(val) {// 有值时才执行过滤if (val) {let that = this;let result = [];pleteData.forEach((e) => {let m = pinyin.match(e.stnm, val);if (m != false) {result.push(e);}});//搜索到相应的数据进行显示that.selectSiteList = result;} else {this.selectSiteList = pleteData.slice(0, 3);}},clear() {this.selectSiteList = pleteData.slice(0, 3);},
下边是html代码
<el-selectclearable@clear="clear"size="mini"filterable:filter-method="pinyingMatch"value-key="stcd"v-model="searchVal"placeholder="站点查询"class="site_select"><el-optionv-for="item in selectSiteList":key="item.stcd":label="item.stnm + '(' + item.stcd + '-' + item.sttp + ')'":value="item"></el-option></el-select>
下边是数据
data() {return {completeData: [{ sttp: "111341", stcd: "13223", stnm: "四川" },{ sttp: "222234232225", stcd: "2323", stnm: "北京" },{ sttp: "32224232222", stcd: "132311", stnm: "江西" },{ sttp: "322242342222", stcd: "323098", stnm: "广东" },{ sttp: "1123211111", stcd: "121231233", stnm: "河南" },{ sttp: "222234232225", stcd: "212", stnm: "河北" },{ sttp: "32224232222", stcd: "1331231", stnm: "重庆" },{ sttp: "3222422222", stcd: "3091238", stnm: "广西" },],searchVal: "",selectSiteList: [],};},mounted() {// 假如我们得到数据很大，进行过滤显示if (pleteData.length > 3) {this.selectSiteList = pleteData.slice(0, 3);} else {this.selectSiteList = pleteData;}},
