Element-Plus: Select组件实现滚动分页加载

Element-Plus的select组件并没有自带滚动分页加载的功能,其虽然提供了自定义下拉菜单的底部的方式可以自定义上一页下一页操作按钮的方式进行分页加载切换:

但如果不想通过点击分页按钮的方式,利用滚动触底进行下一页加载的话,可以利用Vue自定义指令实现:

自定义指定的实现方式,在网络上已经有实现的代码了,只不过需要在<el-select>上添加指定的popper-class(比如:popper-class="single-select-loadmore"),这样做主要是因为<el-select>默认是将下拉列表插入至 body 元素(teleported=true),为了获取下拉列表的实际Dom对象而额外添加了popper-class

复制代码
 const selectDom = document.querySelector('.single-select-loadmore .el-select-dropdown__wrap')

这样做略显麻烦,不够灵活。那么有没有办法,不设置额外的popper-class来获取到对应的下拉列表的Dom元素呢?Element-Plus文档并没有相关获取下拉列表Dom的相关属性,并且在<el-select>渲染的Dom和下拉列表的Dom元素在审查代码时也没有发现明显的关联性。但通过对mounted周期调试,发现了埋藏深处的popperRef.contentRef正是我们要找的下拉列表的Dom,于是代码可以这样实现:

复制代码
// src/directive/elSelectLoadMore.js

export default {
  mounted(el, binding, vnode) {
    const selectDom = vnode.children[0].component.refs.popperRef.contentRef.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    function loadMores() {
      // 判断是否到底
      const isBottom = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (isBottom) {
        // 执行事件回调
        binding.value && binding.value();
      }
    }
    // 将获取到的dom和函数挂载到el-select上,以便实例销毁时进行事件移除处理
    el._selectDom = selectDom;
    el._selectLoadMore = loadMores;
    // 监听滚动事件
    selectDom?.addEventListener('scroll', loadMores.bind(selectDom));
  },
  // 实例销毁
  beforeUnmount(el) {
    if (el._selectLoadMore) {
      el._selectDom.removeEventListener('scroll', el._selectLoadMore);
      delete el._selectDom;
      delete el._selectLoadMore;
    }
  }
}

// src/directive/index.js

import elSelectLoadMore from './common/elSelectLoadMore'

export default function directive(app){
  app.directive('selectLoadmore', elSelectLoadMore)
}

// src/main.js

import App from './App'
import directive from './directive'

const app = createApp(App)
directive(app)

经过简单测试,上述代码可以正常实现分页。需要注意的是上述selectDom的获取方式没有经过充分测试,只作为实验性代码。

相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
Sheldon一蓑烟雨任平生2 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
zuo-yiran6 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837756 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
abiao19817 小时前
VUE的“单向数据绑定” 和 “双向数据绑定”
前端·javascript·vue.js
麦麦大数据7 小时前
F042 A星算法课程推荐(A*算法) | 课程知识图谱|课程推荐vue+flask+neo4j B/S架构前后端分离|课程知识图谱构造
vue.js·算法·知识图谱·neo4j·a星算法·路径推荐·课程推荐
拉不动的猪7 小时前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
南清的coding日记8 小时前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
Xiaouuuuua8 小时前
2026年计算机毕业设计项目合集
前端·vue.js·课程设计
shawn_yang8 小时前
实现公历和农历日期选择组件(用于选择出生日期)
vue.js·vant