zoukankan      html  css  js  c++  java
  • Element-ui 下拉列表 选项过多时如何解决卡顿问题

    当使用Select选择器时,如果下拉列表有几千个几万个,因此通过滚动条一个个的去找不是很现实, 这时可以对select设置filterable属性,可以在下拉控件里进行搜索。例如:

    <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>
    

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

    <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>
    
  • 相关阅读:
    Python网络协议(osi七层协议)
    Python面向对象之反射,双下方法
    Python类的成员
    Python异常处理
    mysql 索引 慢查询优化 && 数据库性能优化
    数据库(视图、事务、存储过程、函数) && 数据库备份
    mysql数据库连接模块 pymysql && sql注入
    主线程与子线程的关系
    socket 编程实例 基于线程池实现服务端并发
    日常迷惑积累
  • 原文地址:https://www.cnblogs.com/shemingxin/p/12514390.html
Copyright © 2011-2022 走看看