封装el-autocomplete下拉列表分页滚动加载

最新推荐文章于 2025-04-27 19:19:17 发布

李_不理解

最新推荐文章于 2025-04-27 19:19:17 发布

阅读量721

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 elementui

本文链接：https://blog.youkuaiyun.com/sunflower_li/article/details/133026670

文章介绍了如何在Vue项目中创建一个名为scrollLoad的自定义指令，用于监听`el-autocomplete`下拉框的滚动，当滚动到底部时自动加载更多数据。同时展示了指令的绑定、解绑以及调用方法的示例。

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

添加自定义指令函数在main.js抛出，方便系统其他地方可以直接调用

// 自定义指令，监听el-autocomplete下拉框的滚动，滚动到底部就加载下一页
  Vue.directive('scrollLoad', {
    bind(el, binding, vnode) {
      function handleScroll(e) {
        let isBottom = e.target.clientHeight + e.target.scrollTop >= e.target.scrollHeight - 40
        if (isBottom && !vnode.context.loading) {
          binding.value()
        }
      }
      // 监听滚动
      let wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
      el.__handleScroll__ = handleScroll
      el.__wrapDom__ = wrapDom
      wrapDom.addEventListener('scroll', handleScroll, false)
    },

    unbind(el, binding, vnode) {
      // 解除事件监听
      el.__wrapDom__.removeEventListener('scroll', el.__handleScroll__, false)
    },
  })

在需要使用的地方直接使用v-scrollLoad="handleScroll"

// 调用地方
<el-autocomplete
  ref="refName"
  :fetch-suggestions="remoteMethod"
  @select="handleSelect"
  v-model="completeData"
  v-scrollLoad="handleScroll"
/>
// 方法定义
handleScroll(event) {
   // 添加加载loading，避免请求未完成时重复请求导致页码和数据错乱
   if(this.moreLoading) {
        return
   }
   this.moreLoading = true
   this.page += 1
   // getData自定义的请求数据的方法，在callback里处理下拉列表的数据
   this.getData(arr=>{
      this.$refs[refName].$data.suggestions.push(...arr)
      this.$nextTick(()=>{
        this.moreLoading = !arr.length
      })
   })
}