el-select中下拉数据太多,页面卡顿

本文主要是介绍el-select中下拉数据太多,页面卡顿，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题

下拉框选项数据太多：由于下拉的数据过多，导致页面渲染复杂化，使得页面卡顿或者卡死问题。

解决办法

由于数据过多导致渲染卡顿，所以减少需要渲染的数据。首先，我们可以在拿到数据的时候进行懒加载，默认只展示20条数据，随着用户下拉的滑动，逐渐增加条数。这里我们自定义一个下拉的懒加载。其次,使用fildter-method方法进行过滤下拉数据。

示例代码

<template><el-select v-model="accept_id" v-selectloadmore:rangeNum="() => rangeNum += 10" size="mini" filterable :filter-		method="filterMethod" placeholder="选择接收方"><el-option v-for="item in acceptList.slice(0,rangeNum)" :key="item.id" :value="item.id" :label="item.name">{{ item.name }}</el-option></el-select>
</template>
<script>export default {directives: {'selectloadmore': {bind(el, binding) {const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')selectDom.addEventListener('scroll', () => {if (selectDom.scrollHeight - selectDom.scrollTop <= selectDom.clientHeight + 20) {binding.value()}})}}},data(){return {accept_id:undefined,acceptList:[],copyAcceptList:[],rangeNum: 20,}},mounted(){//获得acceptList的数据},methods:{filterMethod (){this.rangeNum = 20//请求接口,筛选数据}}
}
</script>