Element-ui 下拉列表 选项过多时通过自定义搜索来解决卡顿问题
当使用Select选择器时,如果下拉列表的数据量太多,会有一个明显的卡顿体验,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-select v-model="value" filterable placeholder="请选择">
<el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
</el-option>
</el-select>
</div>
<script>
let options = []; for(let i=1;i<5000;i++)options.push({label:'Test'+i}); //模拟大数据下拉列表
new Vue({
el:"#app",
data:{
options:options,
value:''
}
})
</script>
</body>
</html>
writer by:大沙漠 QQ:22969969
例子里我们用options模拟大量的下拉数据,渲染如下:
由于下拉列表有几千个,因此通过滚动条一个个的去找不是很现实的, 我们设置了filterable
属性,因此可以在下拉控件里进行搜索,如下:
体验的过程中还是会感觉明显的卡顿现象,问题和上面一样,还是因为下拉列表太多了,怎么办呢,我们可以通过Select控件的filter-method方法来自定义搜索方法,限制下拉数据只有有限制的条数,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-select v-model="value" filterable :filter-method="filterMethod" placeholder="请选择">
<el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
</el-option>
</el-select>
</div>
<script>
let options = []; for(let i=1;i<5000;i++)options.push({label:'Test'+i}); //模拟大数据下拉列表
new Vue({
el:"#app",
data:{
options:options.slice(0,10), //默认为options的前10个
value:''
},
methods:{
filterMethod(query){ //query是输入的关键字
if(query == '')
this.options = options.slice(0,10)
else{
let result = [] //存储符合条件的下拉选项
options.forEach(val=>{
if(val.label.indexOf(query)!=-1) result.push(val)
})
this.options = result.slice(0,10) //只取前10个
}
}
}
})
</script>
</body>
</html>
渲染如下:
这样就不会有卡顿问题了,我们限制了下拉选项的个数,因此通过滚动条可以很容易的选择到某个选项,对于大批量的下拉选项来说挺有用的。
Element-ui 下拉列表 选项过多时通过自定义搜索来解决卡顿问题的更多相关文章
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找
做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- element ui table render-header自定义表头信息使用
在使用vue自定义组件内容过程之中,我们绝大多数情况下都是通过预先写好不同的html模板,再通过props传入不同的值来渲染不同的模板.例如我们需要实现一个<v-title size='1'&g ...
- vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。
老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- 🎉 Element UI for Vue 3.0 来了!
第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~ 2016 年 3 月 13 日 Element 悄然诞生,经历 ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
随机推荐
- 拿到外包公司的offer,我要去么?
引言: 前一阵子有一个帖子引起了非常广泛的讨论,描述的就是一个公司的外包工作人员,加班的时候因为吃了公司给员工准备的零食,被公司的HR当场批评!这个帖子一发出来,让现在测试行业日益新增的外包公司备受关 ...
- 日地拉格朗日L2点轨道的卫星运行
看了嫦娥四号通信的中继卫星,不明白是怎么运行的,下面的演示解除了我的疑问. https://lt.cjdby.net/thread-2479933-1-2.html
- 【同步工具类】CountDownLatch闭锁任务同步
[同步工具类]CountDownLatch闭锁任务同步 转载:https://www.cnblogs.com/yangchongxing/p/9214284.html 打过dota的同学都知道,多人一 ...
- 还不知道如何实践微服务的Java程序员,这遍文章千万不要错过!
作者:古霜卡比 前言 本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件.本文侧重于简明地表达微服务架构的全局图景,因此不会涉及具体如何使用组件等细节. 要理解微服务 ...
- 关于java反射里的.class、.getClass()、Class.Forname()
博主在研究java反射这一章节时,曾被三个方法困扰多时,.class..getClass().Class.Forname(),先上代码 这是类A package cn.yonyong.net.tcp. ...
- 使用 API 网关构建微服务-2
「Chris Richardson 微服务系列」使用 API 网关构建微服务 Posted on 2016年5月12日 编者的话|本文来自 Nginx 官方博客,是微服务系列文章的第二篇,本文将探讨: ...
- css重点知识和bug解决方法
1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...
- 【Java必修课】好用的Arrays.asList也有这三个坑
好用的asList 在开发或写测试用例的过程中,经常会用到Arrays.asList()这个方法,可以快速方便地将数组转化成一个List.例如: List<String> list = A ...
- leetcode之缺失的第一个正数
给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0]输出: 3示例 2: 输入: [3,4,-1,1]输出: 2示例 3: 输入: [7,8,9,11,12] ...
- mac-安装sshpass
在配置了ssh免密认证id_rsa.pub之后,在cmd终端可以实现免密登陆对应配置了密钥的服务器,但是在python程序中,想要调用cmd执行免密操作,还需要安装sshpass,sshpass用于非 ...