當使用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>