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>
