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

最新推荐文章于 2024-08-03 08:44:23 发布

sqwu

最新推荐文章于 2024-08-03 08:44:23 发布

阅读量2.8k

点赞数 3

分类专栏： element 文章标签： vue el-select 远程搜索

本文链接：https://blog.csdn.net/qq_42345108/article/details/108359074

版权

在使用Element UI的el-select组件处理远程查询大数据量（如1w条以上）时，页面可能会因前端渲染而卡死。解决思路包括分批加载数据，如初始加载50条，点击加载更多，以及监听滚动事件实现自动加载。通过优化，可以使用防抖函数减少不必要的后台请求，提高性能。具体实现包括组件代码和防抖函数的引入与应用。

摘要由CSDN通过智能技术生成

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="numberList.length > 9 && numberList_.length !== numberList.length" ref=