element-plus的el-select实现触底加载更多(新版本报错踩坑)

1.创建directive文件然后创建index.js

import { nextTick } from 'vue'
export const Loadmore = app => {
  app.directive('loadmore', {
    mounted: function(el, binding) {
      nextTick(() => {
        let dropdownClass = el.firstElementChild.getAttribute(
          'aria-describedby'
        )
        const domClass =
          '#' + dropdownClass + ' .el-select-dropdown .el-select-dropdown__wrap'
        const element = document.querySelector(domClass)
        // 监听滚动事件
        element &&
          element.addEventListener('scroll', () => {
            const { scrollTop, scrollHeight, clientHeight } = element
            const scrollDistance = scrollHeight - scrollTop <= clientHeight
            if (scrollDistance) {
              binding.value() // 调用加载更多的回调函数
            }
          })
      })
    },
  })
}


在vue的main.js中加入
// 注册自定义指令
import * as Directives from '@/directive'
Object.values(Directives).forEach(fn => fn(app))


使用方法el-select中加
v-loadmore="loadMoreData"



loadMoreData(){
        console.log('滑动到底部')
      },