当使用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 下拉列表 选项过多时通过自定义搜索来解决卡顿问题的更多相关文章

  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. python爬虫--分布式爬虫

    Scrapy-Redis分布式爬虫 介绍 scrapy-redis巧妙的利用redis 实现 request queue和 items queue,利用redis的set实现request的去重,将s ...

  2. 《Java基础知识》序列化与反序列化详解

    序列化的作用:为了不同jvm之间共享实例对象的一种解决方案.由java提供此机制. 序列化应用场景: 1. 分布式传递对象. 2. 网络传递对象. 3. tomcat关闭以后会把session对象序列 ...

  3. LeetCode刷题总结-树篇（下）

    本文讲解有关树的习题中子树问题和新概念定义问题,也是有关树习题的最后一篇总结.前两篇请参考: LeetCode刷题总结-树篇(上) LeetCode刷题总结-树篇(中) 本文共收录9道题,7道中等题, ...

  4. 浅析 Java 与 C++ 的垃圾回收机制

        Java老师在期末复习大纲上出了一道关于JVM垃圾回收机制的题目,想要我们简述一下JVM垃圾回收机制,与老师交流后,大概老师是希望通过与其他语言在垃圾回收对比,介绍一下Java在这方面的特点和 ...

  5. C#中使用Path、Directory、Split、Substring实现对文件路径和文件名的常用操作实例

    场景 现在有一个文件路径 E:\\BTSData\\2019-11\\admin_20180918_1_1_2 需要获取最后的文件名admin_20180918_1_1_2 需要获取文件的上层目录20 ...

  6. 【代码审计】ESPCMSP8(易思企业建站管理系统)漏洞报告

    0x00简介 项目名称:ESPCMS-P8(易思企业建站管理系统) 测试平台:Windwos 版本信息:P8.19082801稳定版 更新时间:2019-08-30 00:56:32 网站官网:htt ...

  7. Nginx 安装、配置及相关介绍

    一.前言 Nginx是一个高性能的HTTP和反向代理服务器,由俄罗斯人开发的,第一个版本发布于2004年10月4日.是一款轻量型的Web服务器,其特点是占有内存少,并发能力强,对负载均衡等提供了非常方 ...

  8. 安全性测试：OWASP ZAP 2.8 使用指南（四）：ZAP扫描移动应用安全

    在做移动应用(APP,小程序等)测试时,需要关注应用安全性. ZAP是可以用来进行手机移动应用渗透性测试扫描的. 正因为ZAP是采用“中间代理”的形式,截取并扫描所有客户端与服务器的交互请求,作为客户 ...

  9. 从零开始的vue学习笔记（六）

    混入 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.简单解释就是把一个Vue组件中的内容提供给别的组件来用.例子: // 定义一个混入对象 var myMixin ...

  10. Python——高阶函数概念（Higher-order function）

    1.变量可以指向函数 以内置的求绝对值abs()函数为例,: >>> abs(-12) 12 >>> abs <built-in function abs&g ...