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>
    
  • 相关阅读:
    NUMBER BASE CONVERSION(进制转换)
    2776 寻找代表元(匈牙利算法)
    最长严格上子序列(二分优化)
    c++ bitset类的使用和简介
    笨小猴 2008年NOIP全国联赛提高组
    三国游戏 2010年NOIP全国联赛普及组
    全国信息学奥林匹克联赛(NOIP2014)复赛 模拟题Day2 长乐一中
    codevs 1704 卡片游戏
    热浪
    全国信息学奥林匹克联赛 ( NOIP2014) 复赛 模拟题 Day1 长乐一中
  • 原文地址:https://www.cnblogs.com/shemingxin/p/12514390.html
Copyright © 2011-2022 走看看