当使用Select选择器时，如果下拉列表的数据量太多，会有一个明显的卡顿体验，例如:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <el-select v-model="value" filterable placeholder="请选择">
  13.             <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
  14.         </el-option>
  15.           </el-select>
  16.     </div>
  17.     <script>
  18.         let options = []; for(let i=1;i<5000;i++)options.push({label:'Test'+i});        //模拟大数据下拉列表
  19.         new Vue({
  20.             el:"#app",
  21.             data:{
  22.                 options:options,
  23.                 value:''
  24.             }
  25.         })
  26.     </script>
  27. </body>
  28. </html>

writer by:大沙漠 QQ:22969969

例子里我们用options模拟大量的下拉数据，渲染如下:

由于下拉列表有几千个，因此通过滚动条一个个的去找不是很现实的， 我们设置了filterable属性，因此可以在下拉控件里进行搜索，如下:

体验的过程中还是会感觉明显的卡顿现象，问题和上面一样，还是因为下拉列表太多了，怎么办呢，我们可以通过Select控件的filter-method方法来自定义搜索方法，限制下拉数据只有有限制的条数，例如:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <el-select v-model="value" filterable :filter-method="filterMethod" placeholder="请选择">
  13.             <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
  14.         </el-option>
  15.           </el-select>
  16.     </div>
  17.     <script>
  18.         let options = []; for(let i=1;i<5000;i++)options.push({label:'Test'+i});        //模拟大数据下拉列表
  19.         new Vue({
  20.             el:"#app",
  21.             data:{
  22.                 options:options.slice(0,10),                                                //默认为options的前10个
  23.                 value:''
  24.             },
  25.             methods:{
  26.                 filterMethod(query){                                                        //query是输入的关键字
  27.                     if(query == '')
  28.                         this.options = options.slice(0,10)
  29.                     else{
  30.                         let result = []                                                        //存储符合条件的下拉选项
  31.                         options.forEach(val=>{
  32.                             if(val.label.indexOf(query)!=-1) result.push(val)
  33.                         })
  34.                         this.options = result.slice(0,10)                                    //只取前10个
  35.                     }
  36.                 }
  37.             }
  38.         })
  39.     </script>
  40. </body>
  41. </html>

渲染如下:

这样就不会有卡顿问题了，我们限制了下拉选项的个数，因此通过滚动条可以很容易的选择到某个选项，对于大批量的下拉选项来说挺有用的。

Element-ui 下拉列表 选项过多时通过自定义搜索来解决卡顿问题的更多相关文章

  1. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  2. 解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  3. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  4. element ui table render-header自定义表头信息使用

    在使用vue自定义组件内容过程之中,我们绝大多数情况下都是通过预先写好不同的html模板,再通过props传入不同的值来渲染不同的模板.例如我们需要实现一个<v-title size='1'&g ...

  5. vue实现多语言国际化(vue-i18n)，结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  6. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  7. 🎉 Element UI for Vue 3.0 来了！

    第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~ 2016 年 3 月 13 日 Element 悄然诞生,经历 ...

  8. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  9. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

随机推荐

  1. 成为java高手的成长历程想学好java必看

    1:J2SE入门阶段(3-6个月) 学习内容:J2SE常用类,JDBC等等 动态绑定,反射机制等 2:J2EE入门阶段(3个月) 学习内容:JSP/Servlet/JavaBean MVC结构的概念 ...

  2. vue-cli3配置webpack generate-asset-plugin

    最近尝试将vue项目中的后台URL抽离到打包后的配置文件中,看到有使用generate-asset-plugin在build时生成配置文件的做法,倒腾了一下午使该webpack plugin在vue- ...

  3. 在 ASP.NET Core 中使用 Serilog 进行日志记录

    目录 从 NuGet 安装 Serilog 在 Main函数 中配置 Serilog 在项目中使用 Serilog 进行日志输出 从 NuGet 安装 Serilog 核心的包是 Serilog 和 ...

  4. Ubuntu Server 16.04 LTS上怎样安装下载安装Nginx并启动

    场景 Linux-安装 Ubuntu Server 16.04 X64(图文教程详细版): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  5. vscode 同步扩展插件

    第一步: 在 VSCode 中,安装用于同步配置的插件 settings sync     第二步:将 VSCode 配置上传到 GitHub 完成这一步需要 GitHub token 和 GitHu ...

  6. js截取指定字符前面或后面的内容

    function getCaption(obj,state) { var index=obj.lastIndexOf("\-"); if(state==0){ obj=obj.su ...

  7. maven的下载、安装及配置

    一.下载maven 1. maven的下载路径 (1)Apache官网:https://maven.apache.org (2)https://pan.baidu.com/s/1Yvv44ICGSxG ...

  8. Java面试题_第二阶段(Servlet、HTTP、Session、JSP、 Ajax、Filter、JDBC、Mysql、Spring)

    1.1. 描述Servlet调用过程? 答案: (1)在浏览器输入地址,浏览器先去查找hosts文件,将主机名翻译为ip地址,如果找不到就再去查询dns服务器将主机名翻译成ip地址. (2)浏览器根据 ...

  9. 28.web8

    file_get_contents()文件包含漏洞,根据题目提示txt?尝试flag.txt payload:  ?ac=flags&fn=flag.txt

  10. .Net Core WebApi 模型验证无效时报400

    问题 模型验证无效时,没有进入到接口里,而是直接报400 Bad Request,非常不友好. 环境 SDK:.Net Core 2.2.401 开发工具:VS2017 step 1 创建接口 /// ...