elementui下拉框 清空_巧妙解决element-ui下拉框选项过多的问题
1. 场景描述
不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好
用人会说element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决的方案。但是有时候这种方法有时候不一定适用
(1)有时候服务端数据是经过计算返回给我们的,可能返回不是特别快,体验不是很好
(2)有时候数据可能只有几千条,全部渲染又不太合适,一直掉接口不是特别好
(3)仅仅通过前端能不能解决,如果能解决,岂不是减轻了服务端的工作和压力
2.解决办法
1 ) 分段加载:也不加载下拉项,通过点击下拉框的时候,再去加载,此时的选项全部加载进来,该种情况只适用于缓加载情况,需要点击加载完后才能下拉选项,体验一般。
2 )提示:element-ui的select有一个fildter-method方法,我们可以通过这个方法来进行过滤下拉项
假设我们有个下拉框是用来选择用户的
1
3 filterable4 :filter-method="userFilter"
5 clearable>
6
8 :key="item.userId"
9 :label="item.username"
10 :value="item.userId"
11 >
12
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()
}
);
},
如上所示,我们从后台获取用户列表,经过我们自己的过滤,我们每次只渲染50条数据,无论有多少数据,对我们来说也支持一个变量,占个内存。当然数据越多,数组的遍历也会相应的慢,但是这个影响不大。
我们不仅能过滤名字,还可以对我们制定的任一项进行过滤
优化:上面的代码我们还可以适当优化下,只有发现了数组长度超过了50项,我们就停止遍历
3.效果图
elementui下拉框 清空_巧妙解决element-ui下拉框选项过多的问题相关推荐
- easyui前端实现多选框_前端:Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
- 解决 element ui 本地使用 引入 图标不显示 .ttf和.woff 报错问题
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题 原因 因为文件内缺少两个文件 根据控制台提示 发现少了.ttf和.woff两个文件 1)element-ico ...
- 前端:Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
- iview select 怎么清空_如何解决iview 的select下拉框选项错位的问题,具体操作如下...
下面我就为大家分享一篇完美解决iview 的select下拉框选项错位的问题,具有很好的参考价值,希望对大家有所帮助. 在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉 ...
- bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
- vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具 编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分 新增 空 {{ drug.name }} 刪除 尚未新增任何資料 總金額:{{ totalMoney } ...
- vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载
在小程序开发中使用下拉刷新和上拉加载非常多,比如常用的展示型首页,而实现这个功能有两种形式,第一种是使用 scroll-view 组件,第二种是不使用 scroll-view 组件而让整个页面刷新,那 ...
- vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
- vue单选框选中_使用vue如何默认选中单选框
使用了vue以后,发现这真的是一个灵活高效的框架,能够轻松实现页面的实时刷新. 那么,今天先聊聊单选框的使用.一般我们使用单选框,会这么写: //HTML one two three 有"c ...
最新文章
- 1024,不讲技术,来一套程序员续命操~
- RMAN异机复制数据库(相同路径)
- 过滤html标签的代码
- Metasploit基础和基本命令详解
- 如何制作印章_用Word也能做出逼真的电子印章!简单3步!1分钟搞定
- VMWare笔记-解决虚拟机能ping通主机能上网,但主机ping不通虚拟机(含思路)
- 3.TCP/IP 详解卷1 --- IP:网际协议
- 程序流程图的switch怎么表示_算法是程序的灵魂,让我们从基础开始
- 小猪cms之怎样查询绑定的微网站模板
- 基于百度tts-实现文字转语音,支持下载,在线预览
- VLFeat vs2015 vc++ 64位操作系统 配置 运行(Win7,Win10)
- 英文论文查重用什么软件比较好?
- python求积分面积的几个方法
- 计算机 电脑 整机 加密,如何加密文件夹
- 美国篮球巨星科比坠机去世 年仅41岁
- proto_path passed empty directory name. (Use “.“ for current directory.)
- 深度学习(自然语言处理)RNN、LSTM、TextCNN
- MySQL 主从架构在线热迁移MGR 方案
- 数据库中@代表什么意思
- IDEA2020版导入tomcat的jar包到eternal libraries时遇到的问题
热门文章
- python的matplotlib风格_matplotlib 的几种风格 练习
- Servlet拦截器
- php教程知识点归纳,PHP知识点小结
- java xml dom getelementbyid,DOM中常见的元素获取方式
- kafka 不同分区文件存储_大白话 + 13 张图解 Kafka
- 如何做好内容策划并完成一篇合格的深度文?
- 云服务器带宽如何计算,云服务器怎么选择带宽
- Linux的slab和nginx的区别,Nginx核心知识100讲》nginx Slab管理器
- 微信公众号网页开发:播放视频,在列表中滑动会脱离文档流
- CF888G XOR-MST 最小异或生成树