el-select远程查询大数据量分段加载

el-select远程查询大数据量分段加载

1.问题：

最近使用elementUI的el-select组件的远程查询功能，发现在大量数据（1w条以上）的时候出现页面卡死的情况，经过排查，产生问题的原因是前端渲染造成的。

2.解决思路

1.在查找解决方案的时候看到一个解决办法是加载前50条，效果是这样的：

2.上面那个方法已经解决了页面卡死的问题了，但是只显示了50条结果，其他的结果无法显示。
顺着这个思路，我给最后一行（“只显示前50条…”）加了一个点击事件，鼠标点击的时候就多显示20条，
效果是这样的：


3.再升级一下，可不可以不用点击？
那就得加鼠标滚动事件，通过鼠标滚动加载更多数据，效果与第2点一样，只是不用点击就可以加载了。

3.代码

组件代码：

<!--
 * @Author: Wushiqi
 * @Descripttion: 远程搜索下拉框组件
 * @Date: 2020-08-26 18:17:42
 * @LastEditor: Wushiqi
 * @LastEditTime: 2020-09-02 12:33:45
-->
<template>
  <div>
    <el-form ref="remoteForm" :model="remoteForm" :rules="formRule">
      <el-form-item prop="result">
        <el-tooltip ref="toolTip" :content="remoteForm.result?remoteForm.result:placeholder" popper-class="remote-tooltip" placement="top" effect="light">
          <el-select
            v-if="hasRemote"
            id="remote-search"
            ref="remoteSearch"
            v-model="remoteForm.result"
            filterable
            remote
            clearable
            reserve-keyword
            :placeholder="placeholder"
            :size="size"
            class="remote-search"
            :remote-method="remoteMethod"
            :loading="loading"
            :title="result"
            @input.native="input"
            @change="change"
            @focus="focus"
            @mousewheel="mouseWheel"
          >
            <el-option
              v-for="item in numberList_"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            <div v-if=&#