效果图
搜索前：
搜索后：
使用
安装插件 pinyin-match：
npm install pinyin-match --save
下拉：
<el-select v-model="formData.cvRobotId" placeholder="机器人" clearable class="width-120" @change="robotSearch" filterable :filter-method="robotFilterFn">
<el-option v-for="(item, index) in robotList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
方法：
注意：把 v-model 双向绑定的字段赋值，不想赋值的没 bug 的也可以不赋值（下拉匹配自动清空问题）
// val 输入框的值，name：数组显示值得字段，freezeArr：原本数组全部下拉的值
letterFilterFcn (val, name, freezeArr) {
if (val) {
const arr = freezeArr.filter((item) => {
// 如果直接包含输入值直接返回true
if (item[name]) {
if (item[name].toUpperCase().indexOf(val.toUpperCase()) !== -1) {
return true
}
// 输入值拼音
return PinyinMatch.match(item[name], val)
}
})
return arr
} else {
return freezeArr
}
},
// 搜索方法，切记 把 v-model 双向绑定的字段赋值
robotFilterFn (val) {
this.formData.cvRobotId = val
this.robotList = this.letterFilterFcn(val, 'name', this.freezeArrObj.robotList)
},
robotSearch () {
this.search()
this.robotList = this.freezeArrObj.robotList
},
data值：
robotList: [],
freezeArrObj: {
robotList: []
}