Element-ui 下拉列表選項過多時經過自定義搜索來解決卡頓問題

時間 2019-11-29

標籤 element 下拉列表選項過多經過自定義搜索解決問題简体版

原文原文鏈接

當使用Select選擇器時，若是下拉列表的數據量太多，會有一個明顯的卡頓體驗，例如:css

<!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:22969969html

例子裏咱們用options模擬大量的下拉數據，渲染以下:vue

因爲下拉列表有幾千個，所以經過滾動條一個個的去找不是很現實的，咱們設置了filterable屬性，所以能夠在下拉控件裏進行搜索，以下:npm

體驗的過程當中仍是會感受明顯的卡頓現象，問題和上面同樣，仍是由於下拉列表太多了，怎麼辦呢，咱們能夠經過Select控件的filter-method方法來自定義搜索方法，限制下拉數據只有有限制的條數，例如:element-ui

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