Vue3实战：el-select大数据懒加载实现方案（附完整代码）

前言

在前端开发中，使用Element Plus的el-select组件时，若选项数据量过大（如上千条），会导致下拉框加载缓慢、卡顿，严重影响用户体验。本文将分享一种基于Vue3的el-select大数据懒加载实现方案，通过滚动触底加载更多数据，解决大数据量渲染卡顿问题，适用于大部分管理系统、表单录入等业务场景。

一、实现思路

二、前置准备

确保项目已引入Vue3和Element Plus，若未引入，可通过以下命令安装：

# 安装Vue3
npm install vue@3
# 安装Element Plus
npm install element-plus @element-plus/icons-vue

在main.js中全局引入Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Edit, Delete } from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElementPlus)
app.component('Edit', Edit)
app.component('Delete', Delete)
app.mount('#app')

三、完整实现代码

1. 组件代码（LazySelect.vue）

<template>
<el-select
v-model="selectedValue"
placeholder="请选择"
style="width: 100%"
@visible-change="handleVisibleChange"
>
<el-option
v-for="item in optionList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
<el-option v-if="loading" disabled>加载中…</el-option>
<el-option v-if="noMore" disabled>无更多数据</el-option>
</el-select>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';

// 接收父组件传递的参数
const props = defineProps({
// 初始选中值
modelValue: {
type: [String, Number],
default: ''
},
// 每页加载数量
pageSize: {
type: Number,
default: 20
}
});

// 向父组件 emits 数据
const emit = defineEmits(['update:modelValue']);

// 选中值
const selectedValue = ref(props.modelValue);
// 选项列表
const optionList = ref([]);
// 当前页码
const currentPage = ref(1);
// 加载状态
const loading = ref(false);
// 是否无更多数据
const noMore = ref(false);
// 下拉框是否可见
const isVisible = ref(false);

// 监听选中值变化，同步给父组件
watch(selectedValue, (val) => {
emit('update:modelValue', val);
});

// 模拟接口请求：获取el-select选项数据
const fetchOptions = async () => {
loading.value = true;
try {
// 实际开发中替换为真实接口地址
const res = await fetch(`/api/options?page=${currentPage.value}&pageSize=${props.pageSize}`);
const data = await res.json();
// 模拟接口返回格式：{ list: [], total: 100 }
const { list, total } = data;

if (currentPage.value === 1) {
// 第一页直接赋值
optionList.value = list;
} else {
// 后续页追加数据
optionList.value = […optionList.value, …list];
}

// 判断是否还有更多数据
if (optionList.value.length >= total) {
noMore.value = true;
} else {
noMore.value = false;
}

currentPage.value++;
} catch (error) {
ElMessage.error('获取数据失败，请重试');
console.error('请求失败：', error);
} finally {
loading.value = false;
}
};

// 监听下拉框滚动事件（触底加载）
const handleScroll = debounce(() => {
if (loading.value || noMore.value || !isVisible.value) return;

const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
if (!selectDropdown) return;

// 判断是否触底（滚动高度 + 可视高度 >= 总高度）
const isBottom = selectDropdown.scrollTop + selectDropdown.clientHeight >= selectDropdown.scrollHeight – 10;
if (isBottom) {
fetchOptions();
}
}, 300); // 防抖300ms，避免频繁触发

// 防抖函数
function debounce(fn, delay) {
let timer = null;
return function (…args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}

// 下拉框显示/隐藏时的处理
const handleVisibleChange = (visible) => {
isVisible.value = visible;
if (visible) {
// 显示时初始化数据（若未加载过）
if (optionList.value.length === 0) {
currentPage.value = 1;
fetchOptions();
}
// 绑定滚动事件
setTimeout(() => {
const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
if (selectDropdown) {
selectDropdown.addEventListener('scroll', handleScroll);
}
}, 0); // 延迟绑定，确保下拉框已渲染
} else {
// 隐藏时解绑滚动事件，避免内存泄漏
const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
if (selectDropdown) {
selectDropdown.removeEventListener('scroll', handleScroll);
}
}
};

// 组件卸载时解绑事件
onUnmounted(() => {
const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
if (selectDropdown) {
selectDropdown.removeEventListener('scroll', handleScroll);
}
});
</script>

2. 父组件使用示例

<template>
<div class="container">
<h3>大数据懒加载下拉选择</h3>
<LazySelect v-model="selectedId" :pageSize="20" />
</div>
</template>

<script setup>
import { ref } from 'vue';
import LazySelect from './LazySelect.vue';

// 选中的id
const selectedId = ref('');
</script>

四、关键知识点解析

1. 滚动触底判断逻辑

通过获取el-select下拉框的滚动容器（.el-select-dropdown__wrap），计算滚动高度、可视高度与总高度的关系，判断是否触底：

const isBottom = selectDropdown.scrollTop + selectDropdown.clientHeight >= selectDropdown.scrollHeight – 10;

减去10是为了避免因滚动精度问题导致触底检测不灵敏。

2. 防抖函数的作用

滚动事件会频繁触发，通过防抖函数控制300ms内只执行一次，减少接口请求次数，提升性能。

3. 事件绑定与解绑

在下拉框显示时绑定滚动事件，隐藏时和解绑事件，组件卸载时再次确认解绑，避免内存泄漏。

4. 数据加载状态管理

通过loading状态控制加载中提示，noMore状态控制无更多数据提示，避免重复请求和无效加载，提升用户体验。

五、常见问题排查

• 滚动事件绑定失败：可能是下拉框未渲染完成就绑定事件，可通过setTimeout延迟绑定，确保DOM已生成。

• 触底后未加载更多：检查是否误设noMore为true，或loading状态未重置；同时确认接口返回的total（总数据量）是否正确。

• 数据重复加载：确保防抖函数生效，且每次加载前判断loading和noMore状态，避免并行请求。

总结

本文实现的Vue3+el-select大数据懒加载方案，通过滚动触底加载、防抖处理、状态管理等核心逻辑，有效解决了大数据量下拉框卡顿问题。该方案可直接复用在各类管理系统中，也可根据实际业务需求调整每页加载数量、接口请求逻辑等。如果有其他问题，欢迎在评论区交流讨论！