ElementUI之select多数据加载优化

最新推荐文章于 2025-06-09 09:43:12 发布

「已注销」

最新推荐文章于 2025-06-09 09:43:12 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： elementui javascript vue.js

本文链接：https://blog.youkuaiyun.com/SK_21/article/details/120472431

本文介绍了在使用ElementUI的select组件时，面对大量数据导致的卡顿问题及其解决方案。通过自定义指令和filter-method属性，实现了模糊搜索时动态请求数据或本地过滤，以提高性能。同时，通过事件处理和定时器优化，减少了接口调用次数，解决了下拉选择器的响应速度问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

「🚀」场景

近期着手开发基于ElementUI的后台管理系统，偶然间发现「el-select」下拉选择时候遇到一个问题，当渲染下拉选项的「options」的数据量过多时「本项目中的数据条目已过万」，就会出现下拉选择器卡顿的情况，尤其是在模糊匹配过滤的情况下，显得十分的卡顿。初始化选择器的时候，也会点击无反应，有时候需要点击多次才可出现「dialog」弹窗（本次下拉筛选在弹窗中实现）。翻阅多篇博客笔记之后，最终找到一个可以解决问题的方案，现将此次优化方案记录成为笔记，以便于日后遇到类似问题的时候便于查阅。

「📷」图示

⚠️注：基于select的下拉筛选，通过自定义事件来实现模糊搜索匹配。

一共两种方案：
- 一是获取所有数据，通过输入的关键字自己对获取的数据进行过滤处理；
- 二是通过输入的关键字来动态请求后台接口，通过接口返回的数据来动态渲染下拉选项；

「🍵」代码实现

🌰Vue组件实例

<template>
  <div class="app">
    <el-dialog title="标题" :visible.sync="relatedOpen" :append-to-body="true" width="500px">
      <el-row :gutter="16">
        <el-col :span="20">
          <el-select
            v-model="value"
            filterable
            clearable
            style="width:100%"
            placeholder="请选择"
            :loading="searchLoad"