基于element-ui中el-select下拉框选项过多的优化方案
作者:张贺_ 发布时间:2023-07-02 17:00:50
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>
这样就可以实现下拉框选择器的拼音、字母以及汉字的模糊搜索啦!
来源:https://blog.csdn.net/weixin_41849462/article/details/103234336
猜你喜欢
- 摘要PIL.Image.open读入的是RGB顺序,而opencv中cv2.imread读入的是BGR通道顺序 。cv2.imread会显示
- 前言本文将使用pytorch框架的目标识别技术实现滑块验证码的破解。我们这里选择了yolov5算法例:输入图像输出图像可以看到经过检测之后,
- 前言在8之前的版本中,对于全局变量的修改,其只会影响其内存值,而不会持久化到配置文件中。数据库重启,又会恢复成修改前的值。从8开始,可通过S
- 介绍反射是元数据编程的一种形式,指的是程序获得本身结构的一种能力。不同语言的反射模型实现不一样,本文中的反射,仅仅指的是Go语言中的反射模型
- 本文我们讲述通过 array_unique()函数删除数组中重复元素。array_unique()函数,将数组元素的值作为字符串排序,然后对
- 如下:将html文件下载后,使用BeauifulSoup读取文件,并且使用html.parsertmp_soup.select里面的参数为:
- 如何指定GPU训练模型Linux 查看当前服务器 GPU 的占用情况可以使用 nvidia-smi 命令,如下所示:nvidia-smi关于
- 导语元宵节,又称上元节、灯节,是春节之后的第一个重要节日。相传,汉文帝(前179—前157年)为庆祝周勃于正月十五勘平诸
- Python中多线程使用到Threading模块。Threading模块中用到的主要的类是Thread,我们先来写一个简单的多线程代码:#
- TF-IDFTF-IDF(Term Frequencey-Inverse Document Frequency)指词频-逆文档频率,它属于数
- 这也是老早前整理的了,也贴出来吧:1. showModalDialog和showModelessDialog的异同
- 本文实例为大家分享了python+pyqt5编写md5生成器的具体代码,供大家参考,具体内容如下学了一下pyqt5,写一个小程序来实践一下。
- 本文实例为大家分享了Mysql实现通讯录的具体代码,供大家参考,具体内容如下#-*-code:utf-8-*-import pymysqld
- DML、DDL、DCL区别 . 总体解释: DML(data manipulation language): 它们是SELECT、UPDAT
- 密码强度是一个很普遍的功能,比较简单,主要是怎么制定这个强度规则。现在需要升级密码强度的验证,以前的验证比较简单,现在已经不能满足需求了,现
- #-*- coding: UTF-8 -*-'''Created on 2013-12-5@author: good
- 作者:HelloGitHub-追梦人物文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库当博客上发布的文章越来越多时
- 带参数的二维码对于渠道营销推广来说是很有用的,可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送,可喜的是微信开通了这个
- 前言对于MySQL的理解,我认为很多性能优化工作、主从主主复制都是在调整参数,来适应不同时期不同数量级的数据。故,理解透彻my.cnf里的参
- 在tensorflow中,默认指定占用所有的GPU,如需指定占用的GPU,可以在命令行中:export CUDA_VISIBLE_DEVIC