解决Element UI el-select数据太多造成页面卡顿

问题：el-select接收后端放回的数据太过庞大（成千上万条），导致页面渲染的时候造成卡顿现象。去让后端那边重新调整数据会加大后端的工作量，如何从前端解决这个问题呢？

解决：利用触底加载方法减少资源的消耗，避免页面卡顿。监听到下拉滚动事件，当下拉宽高度+可滑动高度距离底部的距离 > 可滑动高度时，增加数据访问量。

代码实现：

<el-select     v-model="value"     placeholder="请选择"     filterable     clearable     v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)"     @blur="blur"     :filter-method="filterMethod">     <el-option         v-for="i in options.slice(0, rangeNumber)"         :key="i.id"         :label="i.label"         :value="i.value"     ></el-option> </el-select>

 import { getlist } from "@/api/index"; import Vue from "vue"; Vue.directive("el-select-loadmore",{     bind(el,binding){         //获取element-ui定义好的scroll盒子         const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap")         SELECTWRAP_DOM.addEventListener("scroll",function(){             //scrollHeight 获取元素内容高度             //scrollTop 获取或设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，则默认scrollTop=0.             //clientHeight 读取元素的可见高度             //ele.scrollHeight - ele.scrollTop === ele.clientHeight;如果元素滚到底等式返回true，没有返回false；             const condition = this.scrollHeight - this.scrollTop <= this..clientHeight             if(condition){                 binding.value();             }         })     } }); export default{     data(){         return {             options:[],//下拉框列表数据             value:""，             rangeNumber:10,         }     },     methods:{         //获取下拉框列表数据         getList(){             getList().then(res=>{                 this.options = res;             })         },         //下拉框搜索         filterMethod(query){             if(query){                 this.options = this.options.filter(i=>{                     return i.label.includes(query)                 })             }         },         //下拉框滚动事件         loadMore(){             //每次滚动到底部新增条数，可自定义             return ()=>this.rangeNumber += 10;         },         //下拉框失去焦点事件         blur(){             this.rangeNumber = 10;         },     }, };