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-selectfilterable:filter-method="(query)=>{pinyingMatch(query, data)}"@focus="focus"v-model="AirlineCodeVal"@visible-change="changeSelcetval"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></template>
methods: {/*** @Description：当搜索框获得焦点 初始化数据* @param {*}* @return {*}* @Date: -03-29 14:46:25*/focus() {//这里的arr是源数据this.options = arr},/*** @Description：拼音搜返回结果 option赋值给selectData* @param {*} arr 源数据* @param {*} val 搜索框输入的值* @param {*} data 当前操作的对象*/pinyingMatch(arr, data,val) {if (val) {const result = arr.reduce((X, item) => {// 对过滤字段（item.label）const A = pinyin.match(item.label, val);if (A) {X.push(item);}return X;}, []);this.options = result;} else {this.options = arr;}},}
好了笔记就到这里了
