基于element-ui中el-select下拉框选项过多的优化方案
作者：张贺_
这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
element-ui中el-select下拉框选项过多
el-select中options数据超过3000条就会造成前端页面明显卡顿，本次我的遇到的业务场景数据是近2w条，因此在不优化的情况下页面压根无法使用，下面给出我的优化过程。
一种优化思路
element-ui的select有一个remote-method，支持远程搜索，我们让服务端支持一下不就可以了，当然这是一种解决的方案。
但是有时候这种方法对我并能够不适用，因为这样会出现回显问题，回显的时候是还需拿到所需option；
我的做法
element-ui的select有一个fildter-method方法，我们可以通过这个方法来进行过滤下拉项
假设我们有个下拉框是用来选择用户的
<el-select v-model="userId" filterable :filter-method="userFilter" clearable> <el-option v-for="item in userList" :key="item.userId" :label="item.username" :value="item.userId" ></el-option> </el-select>
在这里将userId封装成v-model：
props: {
value: {
type: [String, Number],
default: ''
}
},
computed: {
userId: {
get () {
return this.value || ''
},
set (value) {
this.$emit('input', value)
}
}
},获取option数据及过滤方法：
userFilter(query = '') {
let arr = this.allUserList.filter((item) => {
return item.username.includes(query) || item.userId.includes(query)
})
if (arr.length > 50) {
this.userList = arr.slice(0, 50)
} else {
this.userList = arr
}
},
getUserWhiteList() {
HttpRequest.post("/api/admin/community/getUserWhiteList").then(
response => {
this.allUserList = response.data.list;
this.userFilter()
}
);
},需要注意的是在回显时要从总的option（allUserList）中拿到所需要会显的值，并加入到显示的option（userList）中：
addValueOptions () {
if (this.userId) {
let target = this.allUserList.find((item) => { // 从大option中找到当前条
return item.value === this.userId
})
if (target) { // 将当前条与小option比对，没有则加入
if (this.userList.every(item => item.value !== target.value)) {
this.userList.unshift(target)
}
}
}
},ok，问题解决。
element-ui中el-select下拉框数据过多，用pinyin-match实现拼音、首字母、汉字等模糊搜索
人狠话不多，上图！
pinyin-match库
也是项目需要，由于下拉框的数据过多，使用人员不好选择，就做个拼音，大小写字母以及汉字的模糊搜索，结果就找到来这个 pinyin-match库，能够使用拼音快速检索目标。
特好用的，这个库的作者是个好心人啊，既然好东西也不能藏着，分享给大家！
在线演示：http://laosep.top/pinyin-match/
在项目中的使用步骤
第一步：安装pinyin-match
// 安装 pinyin-match npm install pinyin-match --save
第二步：在需要的组件中使用
利用el-select的filterable 属性和filter-method方法使用模糊搜索
<template>
<el-select v-model="formInline.brandId" @change="changeBrand" filterable :filter-method="pinyingMatch" placeholder="请选择" style="width: 180px" >
<el-option :label="item.label" :value="item.value" v-for="(item,index ) in brand" :key="item.value"></el-option>
</el-select>
</template>
<script>
export default{
data(){
return{
brand:[],//下拉框所有数据
copyBrand:[]
}
},
methods:{
//获取所有的品牌
async getBrand(){
const response = await reqLimitBranch()
this.brand = response.data
//把所有的品牌在赋值copyBrand
this.copyBrand = this.brand
},
//下拉框设置拼音模糊搜索
pinyingMatch(val){
const pinyingMatch = require('pinyin-match')
if(val){
var result = []
//
this.copyBrand.forEach( e => {
var m = pinyingMatch.match(e.label, val)
if( m){
result.push(e)
}
})
//搜索到相应的数据就把符合条件的n个数据赋值brand
this.brand = result
}else{
//没有搜索到数据，就还展示所有的brand
this.brand = this.copyBrand
}
},
}
}
</script>
这样就可以实现下拉框选择器的拼音、字母以及汉字的模糊搜索啦！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。