解决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;
        },
    },
};