element-ui中el-select下拉框实现拼音 首字母 汉字等模糊搜索

安装pinyin-match

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

引入

import PinyinMatch from 'pinyin-match'

ele 下拉框

<el-select filterable :filter-method="handleFilter"><el-optionv-for="item in orderDetails":key="item.id":label="item.codeName":value="item.id"></el-option></el-select>

拼音和输入数值过滤

注意：

// 复制this.copyOrderDetails = Object.assign(this.orderDetails)

handleFilter(val) {// 对绑定数据赋值if (val) {this.orderDetails = this.copyOrderDetails.filter((item) => {// 如果直接包含输入值直接返回trueif (item.codeName) {if (item.codeName.toUpperCase().indexOf(val.toUpperCase()) != -1) {return true}// 输入值拼音dreturn PinyinMatch.match(item.codeName, val)}})} else {this.orderDetails = this.copyOrderDetails}}