Element Select下拉 实现拼音、首字母搜索汉字,下拉匹配自动清空问题
效果图
搜索前:
搜索后:
使用
安装插件 pinyin-match:
npm install pinyin-match --save
下拉:
<el-select v-model="form.robot" placeholder="机器人" @change="robotSearch" filterable :filter-method="robotFilterFn" clearable>
<el-option v-for="(item, index) in robotList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
方法:
注意:把 v-model 双向绑定的字段赋值,不想赋值的没 bug 的也可以不赋值(下拉匹配自动清空问题)
import PinyinMatch from 'pinyin-match'
// 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: []
}