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

最新推荐文章于 2023-10-30 18:11:42 发布

原创最新推荐文章于 2023-10-30 18:11:42 发布 · 800 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

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

添加自定义指令函数在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
      })
   })
}