element-ui select下拉框分页（滚动加载更多）

WeiflR10

已于 2024-01-23 17:12:58 修改

阅读量3.1k

点赞数

文章标签： vue.js javascript

于 2023-02-28 14:36:18 首次发布

本文链接：https://blog.youkuaiyun.com/WeiflR10/article/details/129260754

版权

文章介绍了如何使用Vue自定义指令`v-selectScroll`来优化大量数据的下拉框加载，通过监听滚动事件实现分页效果。在不同select框中应用该指令时遇到问题，作者通过传参来解决监听特定select框的需求，并在main.js中引入自定义指令。同时，由于添加了搜索功能，问题变得复杂。

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

当下拉框数据过多时,加载会非常慢,所以使用分页去显示,通过监听滚动事件来达到分页效果。

我是使用Vue自定义指令来做的。

一、首先在src下创建一个js文件，完成自定义指令的编写


import Vue from 'vue'

export default () => {
  Vue.directive('selectScroll', {
    bind (el, binding) {
//  如上图，我通过v-if来控制了两个select框，当没有binding.arg这个参数时，我只能监听到企业类型下的select框，所以，我通过传参控制了监听的哪个select框
      var className='.'+binding.arg
      el.className=binding.arg
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)
      // const SCROLL_DOM = el.querySelector(“.el-select-dropdown .el-select-dropdown__wrap“)
      SCROLL_DOM.addEventListener('scroll', f