el-select下拉框滚动条触底加载数据方法

创建一个js文件，例如directives.js

import { nextTick } from 'vue'
export const Loadmore = app => {
  app.directive('loadmore', {
    mounted: function(el, binding) {
      nextTick(() => {

        let dropdownClass = $(el).find(".el-scrollbar .el-select-dropdown__wrap")
       dropdownClass.bind("scroll",(item)=>{
         let scrollTop = $(item.target).scrollTop()
         let scrollHeight = $(item.target).get(0).scrollHeight
         let clientHeight = $(item.target).get(0).clientHeight
         //const { scrollTop, scrollHeight, clientHeight } = item
            const scrollDistance = scrollHeight - scrollTop <= clientHeight
            if (scrollDistance) {
              binding.value() // 调用加载更多的回调函数
            }
       })

        // const domClass =
        //   '#' + dropdownClass + ' .el-select-dropdown .el-select-dropdown__wrap'
        // const domClass =
        //   '.popperCustom .el-scrollbar .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() // 调用加载更多的回调函数
        //     }
        //   })
      })
    },
  })
}

然后在main.js中引用

import * as Directives from '@/utils/directives';

 Object.values(Directives).forEach(fn => fn(instance))

然后在el-select中使用v-loadmore调用方法和实现方法即可