Vue项⽬中实现ElementUi框架el-select拼⾳搜索功能
Vue项⽬中实现ElementUi框架el-select拼⾳搜索功能
拼⾳搜索功能
前⾔：由于项⽬需要，且elementUI中的el-select只⽀持中⽂或英⽂匹配，不⽀持全拼⾳匹配或拼⾳⾸字母匹配，故封装该功能。
1. 代码依赖
第三⽅包：pinyin-match
2. 代码⽀持：
1. 全拼⾳匹配 当输⼊beijing 可以匹配如下：“北京” “背景” “北京烤鸭”
2. 拼⾳⾸字母匹配 当输⼊bj时 可以匹配如下：“北京烤鸭” “布局” “编辑” “有背景”，即并不是从第⼀个汉字进⾏匹配，
但需要⾸字母的汉字前后顺序符合。
3. 全拼⾳但最后⼀个汉字拼⾳⾮完整 当输⼊beijin 可以匹配如下：“被禁” “北京”
4. 当输⼊拼⾳退格时，动态更新options的label（这个功能实现起来⽐较⿇烦，⼤概多⽤了80%的代码）
3. 代码实现
1. el-select添加属性
<el-select
filterable
:filter-method="(val)=>{$handleMatch(val,'deptList','name')}"
@click.native="$resetOpts('deptList')">
<el-option
v-for="item in deptList"
:key="item.dictId"
:label="item.name"
:value="item.dictId"></el-option>
</el-select>
2. 创建拼⾳搜索相关⽅法
import store from'@/store'
import PinyinMatch from'pinyin-match/es/traditional.js';
// ⽅法在filter-method绑定的箭头函数中调⽤，需要三个参数：
// 1. el-options的value
// 2. option元素需要遍历的数组名
// 3. 要进⾏拼⾳匹配的options的属性
export function handleMatch(val, arrName, attr){
let res =this.$pyMatch(val,this[arrName], attr)
if(res.length !==0){
this[arrName]= res
}
}
// 该⽅法接收三个参数：
// 1. el-options的value
// 2. 需要遍历的options选项
// 3. 要进⾏拼⾳匹配的options的属性
// 备注：需要在页⾯销毁⽣命周期函数当中调⽤ this.$storemit('resetTemp')
export function pyMatch(val,options,attr){
let res =[]
storemit('copyOpts',options)
storemit('pushValArr',val)
let sVal = pSelect.valArr.slice(-2)[0]
// 当options中的val的长度为1或⼩于上⼀次val的值时，重新将options的备份赋值给options if(val.length < sVal.length || val.length ===1){
options = pOptsArr[0];
}
options.forEach(item =>{
let m = PinyinMatch.match(item[attr], val)
if(m){
res.push(item)
}
})
// 如果没有匹配到结果，就重新将options的备份赋值给options
if(res.length ===0)return options
return res
vue element admin}
// 该⽅法接收⼀个参数：
// 1. option元素需要遍历的数组名
export function resetOpts(arrName){
if(Array.isArray(this[arrName])){
if(this[arrName].length <=1){
this[arrName]=this.$OriginalSelect
}
}
}
3. ⽅法挂载到Vue实例
// 引⼊拼⾳搜索⽅法
import{ handleMatch, pyMatch, resetOpts }from'./utils/pinyinMatch'
// 拼⾳搜索功能⽅法挂载到原型
Vue.prototype.$handleMatch = handleMatch
Vue.prototype.$pyMatch = pyMatch
Vue.prototype.$resetOpts = resetOpts
4. store中创建存储options备份的对象及操作⽅法
// options备份
state:{
tempSelect:{
tempOptsArr:[],
valArr:[]
}
},
mutations:{
copyOpts(state,payload){// 存储匹配到的options，原始的options存储在该数组的第0位if(Array.isArray(payload)){
}
},
pushValArr(state,val){// 存储每次input变化时的value
if(typeof val ==='string'){
}
},
resetTemp(state){// 清空state中的tempSelect，每次路由跳转时调⽤
}
},
getters:{
getOriginalSelect(state){
pOptsArr[0]
}
}
5. 在router全局导航守卫中调⽤清空options备份的⽅法
import store from'@/store'
router.beforeEach((to,from, next)=>{
// 此处省略其他全局导航守卫中的内容
if(pOptsArr.length !==0||  pSelect.valArr.length !==0){
/
/ 当临时存储options备份的数组不为空时，在页⾯跳转之前清空
storemit('resetTemp')
}
next()
})
注意事项
需要遍历的options 绑定的key不能绑定index 因为每⼀次搜索后 options数组会发⽣变化，如果绑定index，index则不能与options⼀⼀对应，应当绑定唯⼀的id或其他参数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。