vue3实现 下拉框触底加载更多及搜索

原创 已于 2023-06-01 09:42:17 修改 · 3.4k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #ecmascript

于 2023-05-31 18:09:55 首次发布
文章描述了一种在Vue3项目中处理el-select组件触底加载功能的方法。由于无法直接通过自定义指令获取el-select-dropdown.el-select-dropdown__wrap元素，作者通过添加自定义属性data-class与popper-class配合，实现了在下拉框滚动到底部时加载更多数据的功能。同时，文章提供了一个封装好的指令示例。

思路

做一个全局指令
查询了大量文章 发现统一用的指令 来实现触底加载功能 实操中发现 在vu3 的版本中
（我这个项目中）无法通过自定义指令的形参 获取el-select-dropdown .el-select-dropdown__wrap 元素，所以通过el-select中的popper-class给下拉框加入一个类名 实现下拉框的选中，为了 方便指令通用 给el-select 加入自定义属性标签data-class 同popper-class值 ,方便获取到当前标签的popper-class

2、项目中的实际用法

在el-select 下再次封装

filtereMethod:自定义筛选的方法
popper-class：为当前select 下拉框的类名
data-class： 同popper-class值 是为了解决指令el参数无法获取到.el-select-dropdown .el-select-dropdown__wrap元素
v-selectLoadMore： 自定义指令

<el-select
	v-model="ruleForm.userId"
	class="m-2"
	data-class="selectClass"
	placeholder="请选择"
	filterable
	:filter-method="filtereMethod"
	v-selectLoadMore="getUserList"
	popper-class="selectClass"
>
	<el-option v-for="item in options" :key
最低0.47元/天 解锁文章
Vue3 + ts+ elementUi 实现后台数据渲染到下拉框选项中，滑动加载更多数据效果
qq_37656005的博客
11-10 2522
功能需求：下拉框中分页加载后端接口返回的人员数据，实现滑动加载更多数据效果，并且可以手动搜索定位数据，此项目使用Vue3 + ts+ elementUi 实现。
flutter实战——实现下拉刷新和加载更多功能
baorant24的博客
04-10 1575
问题背景 移动端日常开发过程中，下拉刷新和加载更多是很常见的功能点，现在一起看下flutter是如何实现下拉刷新和加载更多的。 问题分析 1、通过Dio框架获取网络请求 var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20...
vue3 elementUI select 下拉加载更多（最新-组件封装）
NB_YZL的博客
06-12 1448
【代码】vue3 elementUI select 下拉加载更多（最新）
告别重复代码！Vue3 中后台下拉框统一加载方案（自动缓存、去重、过滤、适配表单与表格）
最新发布
一点一木
09-25 1228
在中后台系统中，下拉框数量多且来源复杂，手写 options 容易冗余又难维护。本文提供一套 配置驱动的统一加载方案，支持枚举、字典、接口和常量，内置缓存、并发去重、树形映射与过滤，已适配 el-form 与 vxe-grid，让下拉配置更高效优雅。
vue3 滚动条触底监听
前端小陈的成长记录
03-01 2151
vue3 滚动条触底监听
Vue3 +el-select实现下拉加载更多功能
lxc的点点滴滴
09-05 2180
用vue3做el-select下拉加载时遇到了很多问题，以前vue2的时候定义一个指令然后很容易就实现了这个功能,但是前两天用vue3的时候遇到了很多坑，不是报错就是根本没反应，也是摸索了好久才实现了，简单记录一下。好了，下拉加载大致功能就实现了，亲测有效。当然为了更好的用户体验，实现该功能的同时，一般会加上搜索功能，注意添加防抖节流防止频繁调用。1.在项目中新建文件，并添加核心代码。2.在main.js中注册指令。最后附上下拉加载功能核心代码。
vue3 elementPlus select选择器下拉加载更多
qq_52065282的博客
07-17 2088
vue3 使用elementPlus组件实现select选择器下拉分页加载更多数据
Vue注册自定义指令实现element-ui组件库select下拉框滚动加载更多
青年码农
04-02 962
点击上方“青年码农”关注回复“特效源码”可获取各种资料在项目开发过程中，总会遇到这样或者那样的问题，这次，用element-ui组件库的select，但是这个组件不支持分页加载更多，如果一次性把所有的数据都返回给前端，那还需要后端再加个接口。是不是有其他方式可以扩展下select？在Vue文档中，找到了实现方式，那就是“注册自定义指令”除了核心功能默认内置的指令 (v-m...
vue2+el-select实现分页加载更多功能
weixin_52443895的博客
11-28 1905
如上图：点击“点击加载更多”按钮，实现分页加载下一页，直到最后一页，提示“已经到底啦~”以上，因为我的场景还需要远程搜索，所以我把remote方法也贴上了，不需要的可自行删减。由于项目下拉框数据过多，一次性加载完，会有性能问题，于是希望可以增加。希望记录的问题能帮助到你！
vue3 - 最新详细实现 “弹框式评论列表“ 无限下拉加载功能，鼠标滚轮到底时触发懒加载，将评论区讨论列表放到一个抽屉弹框中并监听鼠标滑动触底加载更多数据
weixin_41513488的博客
09-02 666
在上述代码中，我们将评论数据传递给了VirtualList组件，并设置了size和remain属性用于控制每次渲染的评论数和剩余多少项时触发加载更多数据。其中，CommentItem是用于渲染单个评论项的子组件。在Vue 3中实现“弹框式评论列表”无限下拉加载功能，需要用到Vue 3的Composition API和Vue的官方库Vue virtual scroll list。首先，确保你的项目已经使用了Vue 3的版本。现在，当用户滚动到评论弹框底部时，将会自动触发加载更多数据。
VUE3 select 下拉加载更多
weixin_46300953的博客
10-09 724
vue 3 下拉加载更多遇到的
vuejs的双向移动端下拉加载更多组件
08-10
vue.js的双向移动端下拉加载更多组件
vue实现滑动到底部加载更多效果
10-16
主要为大家详细介绍了vue实现滑动到底部加载更多效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue3下拉加载更多——无滚动加载上一页最后一条数据（主要用于加载聊天记录以及一些问答）
码农键盘上的梦
10-23 1056
3.2 在元素塞进去之后 元素.scrollTop = 元素.scrollHeight - height (刚刚获取到的距离) 元素滚动上去的距离就是现在的总高度减去刚刚的固定底部。在前面塞元素，滚动条就会往上跑，（其实滚动条还是没动，但是元素向上塞了很多，撑开的东西就铺开了，导致看起来是向上了，其实就是滚动条与顶端的距离没变，但是内容多了）上拉加载的时候，加载出来的元素就往页面末尾塞，此时滚动条是在原处没动的，加载出来就出来了，不会有不好的体验，但是反过来就不行了。
vue3 封装一个ListView触底加载更多
weixin_48819809的博客
03-16 636
vue3 封装一个ListView触底加载更多
vue3（上拉/触底）加载更多
weixin_44037364的博客
05-27 3702
获取可视窗口高度，滚动高度，滚动条高度。
在VUE3实现触底加载功能
2303_78263863的博客
03-21 1664
此函数用于在用户滚动加载历史数据时，​动态扩展查询时间范围​时间范围计算：每次向前扩展 5 分钟的时间窗口；​有效性校验：限制最多查询 30 天内的数据；​状态更新：同步更新界面显示时间和实际查询参数；​数据加载：调用 API 获取指定时间段的监控报警数据。此函数通过时间窗口滑动​时间计算的准确性与时区处理；​状态同步​（显示时间 vs 查询参数）；​扩展性​（步长调整、数据分段逻辑）。结合前文滚动事件处理，形成完整的分页加载交互闭环。定义一个时间选择器。
vue框架的下拉加载更多
xs199562qq的博客
04-25 1997
vue的下加载更多有麻烦，不过也是写写沾沾 源码： HTML js page:自己定显示多少条，我这边因为某些原因显示的多了点，一般只显示10条 基本就是这样！！！ ...
Vue3---封装一个下拉加载更多组件
weixin_55690518的博客
09-19 1246
今天我们手动封装一个下拉加载更多组件，类似于vant组件库中的list功能 loading.vue <template> <div class="infinite-loading" ref="container"> <div class="loading" v-if="loading"> <span class="img"></span> <span class="text">正在加载...&l
vue3 el-select怎么实现懒加载
09-14
<think> 我们参考提供的引用内容，用户需求是在Vue3中使用Element Plus的el-select组件实现懒加载（滚动加载更多）。 引用[1]展示了一个自定义指令的实现，用于监听el-select下拉滚动到底部触发加载更多。 引用[3]展示了一个伪造的接口调用示例，用于懒加载数据。 用户需要的是在Vue3中实现el-select的懒加载方法。我们可以结合引用[1]的自定义指令方法和引用[3]的数据加载方式来实现。 步骤： 1. 封装一个自定义指令，用于监听el-select下拉滚动到底部的事件。 2. 在指令的beforeMount钩子中，给el-select的下拉滚动容器添加滚动事件监听，当滚动到底部时调用绑定的加载函数。 3. 在组件的setup中使用这个指令，并实现加载数据的函数（通常是从后端分页获取数据）。 4. 注意在组件卸载时移除事件监听（指令的beforeUnmount钩子中）。 由于引用[1]的指令是针对多个特定class的容器，我们可以修改为更通用的方式，或者保留class标记以便指定哪些el-select需要懒加载。 实现方案： 1. 自定义指令：v-loadmore 我们可以创建一个指令，命名为loadmore，当滚动到底部时执行绑定的函数。 注意：在Element Plus中，下拉框的滚动容器是`.el-select-dropdown__wrap`（或者`.el-scrollbar__wrap`），但实际我们发现需要找到正确的容器。 2. 组件中使用： - 在el-select上添加自定义指令，并绑定一个加载函数。 - 在加载函数中，请求下一页数据，并将新数据追加到options中。 3. 数据管理： - 需要维护当前页码、每页数量、总页数（或是否有更多）等状态。 下面我们给出具体代码示例： 第一步：定义自定义指令（在src/directives/selectLoadMore.js，然后在main.js中全局注册，或者在组件内局部注册） 指令代码（修改引用[1]使其更通用）： 注意：我们这里采用给el-select组件本身绑定指令，然后在指令内部查找滚动容器。由于el-select的下拉框是动态插入到body中的，我们需要在指令中等待下拉框出现（这里我们简化处理，直接使用MutationObserver来监听下拉框的插入，但这样可能复杂。另一种做法是在指令绑定的元素上添加一个class，然后在指令中通过这个class来查找对应的下拉框容器，但需要注意同一个页面上多个el-select的情况）。 然而，为了简化，我们可以利用Element Plus的下拉框容器有一个共同的父容器（具有类名`el-select-dropdown`），并且我们可以通过绑定指令的el-select组件实例找到其对应的下拉框容器（这需要访问组件内部，可能不稳定）。因此，我们采用另一种方法：在指令中监听滚动事件时，我们监听的是当前el-select组件实例所对应的下拉框容器。但是，由于下拉框是动态生成的，我们需要在每次下拉框出现时重新绑定事件。 考虑到复杂性，我们可以参考引用[1]的方式，通过给el-select添加一个特定的class（如`select-loadmore`）来标记需要懒加载，然后在指令中通过这个class来查找对应的下拉框容器。这样我们就可以在多个el-select上使用同一个指令。 调整后的指令： ```javascript // 文件名：selectLoadMore.js export default { beforeMount(el, binding) { // 我们在el-select组件的外层元素上添加了一个class &#39;select-loadmore&#39;，所以可以通过这个class找到它 // 但是注意，el-select组件渲染后，其外层元素会有多个class，包括&#39;el-select&#39; // 由于下拉框是动态插入到body的，所以我们需要等待下拉框出现，然后给下拉框的滚动容器绑定事件 // 我们通过MutationObserver监听el元素，当下拉框出现时（即类名为el-select-dropdown的元素被添加到body时），绑定事件 // 定义一个MutationObserver，观察body的子元素变化 const observer = new MutationObserver((mutations) => { for (const mutation of mutations) { // 检查添加的节点 if (mutation.addedNodes && mutation.addedNodes.length > 0) { for (const node of mutation.addedNodes) { // 判断是否是下拉框容器，并且是否属于当前el-select // 注意：下拉框容器有一个属性&#39;x-placement&#39;，并且它的父容器上有一个属性aria-owns的值等于当前el-select的id（即el-select的input的id） // 但我们没有直接关联，所以我们可以通过查找下拉框容器中是否有包含我们指令绑定元素的id的aria-owns属性？这样比较复杂。 // 另一种方式：Element Plus的下拉框容器会有一个属性`x-el-select`，其值为el-select的id？没有这样的属性。 // 由于复杂，我们采用另一种简单方式：通过下拉框容器上的一个特定类名来关联，我们在el-select上设置一个id，然后在下拉框容器中查找aria-owns等于这个id的 if (node.classList && node.classList.contains(&#39;el-select-dropdown&#39;)) { // 在这个下拉框容器内部查找滚动容器 const wrap = node.querySelector(&#39;.el-select-dropdown__wrap&#39;); if (wrap) { let loadMoreFn = function() { const isBottom = wrap.scrollHeight - wrap.scrollTop <= wrap.clientHeight + 10; if (isBottom) { binding.value(); } }; wrap.addEventListener(&#39;scroll&#39;, loadMoreFn); // 存储事件函数，以便卸载时移除 if (!el._loadMoreFns) { el._loadMoreFns = new Map(); } el._loadMoreFns.set(wrap, loadMoreFn); } } } } } }); observer.observe(document.body, { childList: true, subtree: true }); el._observer = observer; }, beforeUnmount(el) { if (el._observer) { el._observer.disconnect(); el._observer = null; } if (el._loadMoreFns) { for (const [wrap, fn] of el._loadMoreFns) { wrap.removeEventListener(&#39;scroll&#39;, fn); } el._loadMoreFns.clear(); delete el._loadMoreFns; } } }; ``` 但是，上面的指令实现比较复杂，且MutationObserver可能会频繁触发，而且需要处理多个下拉框的情况。 另一种更简单的做法是：在组件内，通过ref获取el-select实例，然后使用el-select的popperAppended事件（当下拉框插入到body时触发），然后在事件中给滚动容器绑定事件。这样就不需要自定义指令那么复杂了。 因此，我们提供两种方案： 方案一：使用自定义指令（通用但复杂） 方案二：在组件内部通过事件绑定（简单直接） 鉴于用户要求使用自定义指令（引用[1]的方式），我们继续完善指令，但为了简化，我们假设一个页面只有一个el-select需要懒加载，或者多个el-select都使用同一个指令，并且指令绑定的是同一个加载函数（这样可能不太合理，加载函数是每个el-select自己的）。 我们调整指令，只处理当前el-select对应的下拉框： 在指令绑定元素上添加一个id，然后在下拉框容器中，有一个属性`aria-owns`等于el-select的input的id（这个id可以在el-select上设置`id`属性）。这样我们就可以通过这个id关联到下拉框容器。 调整指令： ```javascript // 文件名：selectLoadMore.js export default { beforeMount(el, binding) { // 确保el-select设置了一个id，如果没有，我们生成一个 let selectId = el.id; if (!selectId) { selectId = &#39;select_&#39; + Math.random().toString(36).substr(2); el.id = selectId; } // 创建一个MutationObserver来监听body，当下拉框出现时，并且该下拉框的aria-owns属性包含我们el-select的id（注意：Element Plus中，下拉框的aria-owns等于el-select的id） const observer = new MutationObserver((mutations) => { for (const mutation of mutations) { if (mutation.addedNodes && mutation.addedNodes.length > 0) { for (const node of mutation.addedNodes) { if (node.classList && node.classList.contains(&#39;el-select-dropdown&#39;)) { // 检查下拉框的aria-owns属性是否包含el-select的id if (node.getAttribute(&#39;aria-owns&#39;) === selectId) { const wrap = node.querySelector(&#39;.el-select-dropdown__wrap&#39;); if (wrap) { const loadMoreFn = function() { const isBottom = wrap.scrollHeight - wrap.scrollTop <= wrap.clientHeight + 10; if (isBottom) { binding.value(); } }; wrap.addEventListener(&#39;scroll&#39;, loadMoreFn); // 存储事件函数以便卸载 if (!el._loadMoreFns) { el._loadMoreFns = []; } el._loadMoreFns.push({ wrap, fn: loadMoreFn }); } } } } } // 检查移除的节点，移除事件 if (mutation.removedNodes && mutation.removedNodes.length > 0) { for (const node of mutation.removedNodes) { if (node.classList && node.classList.contains(&#39;el-select-dropdown&#39;)) { if (node.getAttribute(&#39;aria-owns&#39;) === selectId) { // 如果下拉框被移除了，则移除事件监听器（但这里我们已经在node上绑定了事件，node移除后事件自然被回收，所以不用处理？） } } } } } }); observer.observe(document.body, { childList: true, subtree: true }); el._observer = observer; }, beforeUnmount(el) { if (el._observer) { el._observer.disconnect(); el._observer = null; } if (el._loadMoreFns) { el._loadMoreFns.forEach(({ wrap, fn }) => { wrap.removeEventListener(&#39;scroll&#39;, fn); }); delete el._loadMoreFns; } } }; ``` 这个指令依赖于el-select的id和下拉框的aria-owns属性匹配，这是Element Plus的内部实现，可能会随版本变化而变化。 方案二（推荐）：在组件内部实现，不使用自定义指令，而是利用el-select的事件和ref。 在Vue3组件中： ```vue <template> <el-select ref="selectRef" v-model="selectedValue" filterable placeholder="请选择" @popper-appended="onPopperAppended" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </template> <script setup> import { ref, onBeforeUnmount } from &#39;vue&#39;; const selectedValue = ref(&#39;&#39;); const options = ref([]); // 当前显示的数据 const currentPage = ref(1); const pageSize = 10; const total = ref(0); // 总条数，用于判断是否还有更多 const selectRef = ref(null); // el-select的引用 // 加载数据 const loadData = async (page) => { // 模拟接口调用，返回一页数据 const res = await api.getData(page, pageSize); // 如果是第一页，则重置选项 if (page === 1) { options.value = res.data; } else { options.value = [...options.value, ...res.data]; } currentPage.value = page; total.value = res.total; }; // 当滚动到底部时触发加载更多 const onScroll = () => { const scrollWrap = scrollContainerRef.value; if (!scrollWrap) return; const isBottom = scrollWrap.scrollHeight - scrollWrap.scrollTop <= scrollWrap.clientHeight + 10; if (isBottom && options.value.length < total.value) { loadData(currentPage.value + 1); } }; // 存储滚动容器 let scrollContainerRef = ref(null); // 当下拉框被添加到body时触发 const onPopperAppended = () => { // 获取下拉框的滚动容器 if (selectRef.value) { // 注意：el-select的下拉框容器是动态生成的，我们可以通过ref找到下拉框容器的wrap // 但是，在Vue3中，我们无法直接通过ref访问到内部的DOM元素，所以使用nextTick等待渲染 nextTick(() => { // 通过el-select的ref获取下拉框容器 // 注意：Element Plus中，下拉框容器（popper）可以通过selectRef.value.popperRef获得？但实际没有暴露这个属性。 // 我们尝试通过DOM查找：document.body中最后一个类名为el-select-dropdown的元素（但多个下拉框会有问题） // 或者我们通过selectRef.value的id找到对应的下拉框容器（通过aria-owns属性） const dropdown = document.querySelector(`.el-select-dropdown[aria-owns="${selectRef.value.id}"]`); if (dropdown) { const wrap = dropdown.querySelector(&#39;.el-select-dropdown__wrap&#39;); if (wrap) { scrollContainerRef.value = wrap; wrap.addEventListener(&#39;scroll&#39;, onScroll); } } }); } }; // 初始化第一页数据 loadData(1); onBeforeUnmount(() => { if (scrollContainerRef.value) { scrollContainerRef.value.removeEventListener(&#39;scroll&#39;, onScroll); } }); </script> ``` 方案二更直观，但需要处理下拉框容器查找和事件绑定。但是，如果同一个页面有多个el-select需要懒加载，那么需要在每个el-select上都这样写，比较繁琐。 因此，我们可以将方案二中的逻辑抽取成一个组合式函数（Composition API）。 考虑到用户要求使用自定义指令的方式，而且引用[1]就是指令，我们这里提供一个改进的指令版本，该指令可以绑定到el-select上，并且确保只处理当前el-select对应的下拉框。 我们采用方案一中的第二个指令版本，但需要确保Element Plus版本兼容（测试版本为Element Plus 2.x）。 实际使用中，如果指令过于复杂，也可以考虑使用现成的第三方封装，如`el-select-infinite-scroll`（但可能没有Vue3版本）。 因此，我们给出一个折中的自定义指令实现，并提醒用户注意兼容性。 指令最终代码（参考引用[1]并改进）： ```javascript // 文件名：v-loadmore.js export const loadMore = { mounted(el, binding) { const selectId = el.id || (el.id = `el-select-${Math.random().toString(36).slice(2, 9)}`); el._loadMoreHandler = function(event) { const scrollWrap = event.target; const isBottom = scrollWrap.scrollHeight - scrollWrap.scrollTop <= scrollWrap.clientHeight + 10; if (isBottom) { binding.value(); } }; // 使用MutationObserver监听body，找到与当前el-select关联的下拉框 const observer = new MutationObserver((mutationList, observer) => { const dropdown = document.querySelector(`.el-select-dropdown[aria-owns="${selectId}"]`); if (dropdown) { const scrollWrap = dropdown.querySelector(&#39;.el-select-dropdown__wrap&#39;); if (scrollWrap) { scrollWrap.addEventListener(&#39;scroll&#39;, el._loadMoreHandler); el._scrollWrap = scrollWrap; // 保存以便卸载 // 找到后可以停止观察，因为下拉框每次打开都会重新创建，所以我们不能停止，需要在卸载时移除事件 // 但是注意，每次下拉框重新打开都会重新绑定一次事件，所以我们需要在每次打开时移除上一次的事件？所以不能停止观察。 } } }); observer.observe(document.body, { subtree: true, childList: true }); el._observer = observer; }, beforeUnmount(el) { if (el._scrollWrap) { el._scrollWrap.removeEventListener(&#39;scroll&#39;, el._loadMoreHandler); } if (el._observer) { el._observer.disconnect(); } delete el._scrollWrap; delete el._observer; delete el._loadMoreHandler; } }; // 在main.js中全局注册指令 // import { loadMore } from &#39;./directives/v-loadmore&#39; // app.directive(&#39;loadmore&#39;, loadMore) ``` 在组件中使用： ```vue <template> <el-select v-loadmore="loadMore" v-model="value" ... > ... </el-select> </template> <script setup> import { ref } from &#39;vue&#39;; const value = ref(&#39;&#39;); const currentPage = ref(1); const total = ref(0); // 总数据量 const options = ref([]); // 选项列表 // 加载更多函数 const loadMore = () => { if (options.value.length >= total.value) return; currentPage.value++; fetchData(); }; // 获取数据 const fetchData = async () => { // 调用接口，传入currentPage const res = await api.getData(currentPage.value, pageSize); options.value = [...options.value, ...res.data]; total.value = res.total; }; // 初始化 fetchData(); </script> ``` 注意：指令中的`scrollWrap`事件绑定可能会重复（每次下拉弹出都会绑定一次），所以我们在指令的beforeUnmount中移除事件，并在每次打开下拉框时，由于上一次的下拉框被移除，所以事件也随之移除（因为DOM被移除，事件监听器自然失效）。但是，我们的MutationObserver在下拉框出现时又绑定了一次，所以每次新的下拉框都会绑定一个新的事件。这样是可以接受的，因为每次下拉框都是新的。 但是，如果我们多次打开下拉框，那么同一个滚动事件会绑定多次loadMoreHandler，导致一次滚动到底部可能触发多次加载。所以我们需要在每次绑定前先移除之前绑定的事件？然而，由于每次下拉框都是重新创建的，所以不存在同一个scrollWrap绑定多次事件的情况（因为scrollWrap是新的）。因此，我们不需要额外处理。 最后，我们给出一个完整的示例，包括指令和组件内的使用。 由于实现懒加载有多种方式，用户可以根据自己的需求选择。这里我们基于自定义指令提供一个比较通用的实现。 相关问题： 1. 在Element Plus中，el-select的懒加载指令实现需要注意哪些问题？ 2. 如何防止el-select懒加载重复请求数据？ 3. el-select懒加载时，如何结合远程搜索使用？ </think> 在 Vue 3 中使用 Element Plus 的 `el-select` 实现懒加载（滚动加载更多）主要有两种方式：**自定义指令法**和 **`el-tree-select`组件法**。以下是具体实现方法： --- ### 方法一：自定义指令实现（推荐） 通过封装自定义指令监听下拉框滚动事件，适合标准 `el-select` 组件。 ```vue <template> <!-- 添加特定class标识需要懒加载的select --> <el-select v-model="selectedValue" class="single-select-loadmore" v-loadmore="loadMore" // 应用自定义指令 filterable placeholder="请选择" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </template> <script setup> import { ref } from &#39;vue&#39;; // 自定义指令定义 const vLoadmore = { beforeMount(el, binding) { const selectDom = el.querySelector(&#39;.el-select-dropdown__wrap&#39;); const loadMores = function() { const isBottom = this.scrollHeight - this.scrollTop <= this.clientHeight + 10; if (isBottom) binding.value?.(); // 滚动到底部触发回调 }; selectDom.addEventListener(&#39;scroll&#39;, loadMores); el._scrollHandler = loadMores; // 缓存引用用于解绑 }, beforeUnmount(el) { el.querySelector(&#39;.el-select-dropdown__wrap&#39;) ?.removeEventListener(&#39;scroll&#39;, el._scrollHandler); } }; // 组件逻辑 const selectedValue = ref(&#39;&#39;); const options = ref([]); const currentPage = ref(1); const pageSize = 10; const loadMore = async () => { currentPage.value++; const newData = await mockApi.getData(currentPage.value, pageSize); options.value = [...options.value, ...newData]; }; // 初始化数据 mockApi.getData(1, pageSize).then(data => options.value = data); </script> // 模拟API const mockApi = { getData: (page, size) => new Promise(resolve => { setTimeout(() => { // 生成模拟数据（实际替换为真实API） resolve(Array.from({length: size}, (_, i) => ({ value: `opt-${page}-${i}`, label: `选项 ${page}-${i}` }))); }, 500); }) } ``` ### 关键说明： 1. **自定义指令 `v-loadmore`**： - 监听 `.el-select-dropdown__wrap` 容器的 scroll 事件 - 使用 `scrollHeight - scrollTop <= clientHeight + 10` 判断触底 - 通过 `binding.value()` 执行加载回调 2. **滚动优化**： - 添加 `+10px` 容差避免精确触底判断 - 使用防抖避免频繁触发（示例未展示，可自行添加） --- ### 方法二：使用 `el-tree-select` 组件 若数据具有树形结构，可直接使用内置懒加载功能： ```vue <template> <el-tree-select v-model="selectedValue" lazy :load="loadNode" // 懒加载回调 :props="{ label: &#39;name&#39;, value: &#39;code&#39;, children: &#39;children&#39; }" /> </template> <script setup> import { ref } from &#39;vue&#39;; const selectedValue = ref(&#39;&#39;); const loadNode = async (node, resolve) => { if (node.level === 0) { // 加载根节点 const rootNodes = await api.getNodes(0); resolve(rootNodes); } else { // 加载子节点 const childNodes = await api.getNodes(node.data.id); resolve(childNodes); } }; </script> ``` --- ### 两种方法对比 | **特性** | 自定义指令法 | `el-tree-select`法 | |------------------|-----------------------------|----------------------------| | 适用组件 | 标准 `el-select` | 专用 `el-tree-select` | | 数据结构 | 扁平列表 | 树形结构 | | 实现复杂度 | 需封装指令 | 开箱即用 | | 分页控制 | 需手动管理页码 | 自动节点加载 | | 使用场景 | 常规下拉列表 | 层级数据（如地区选择） | --- ### 常见问题解决方案 1. **重复请求问题**： ```javascript let isLoading = false; // 加载锁 const loadMore = async () => { if (isLoading) return; isLoading = true; // ...请求数据 isLoading = false; }; ``` 2. **首次加载优化**： ```vue <el-select :remote-method="initLoad" // 首次聚焦时加载 @focus="initLoad" > ``` 3. **无更多数据提示**： ```javascript // 指令中增加判断 const canLoadMore = ref(true); if (isBottom && canLoadMore.value) binding.value(); ``` > 提示：实际开发中建议将自定义指令封装成独立文件复用，并通过 `currentPage/total` 控制加载状态[^1][^3]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值