element ui select下拉框分页（使用自定义指令完成）

src 目录下新建 directives 文件夹，该文件夹下新建 index.js（用于引入所有的自定义指令），以及其他自定义指令文件

index.js

export * from './selectdirective'

selectdirective.js (下拉框增加触底自定义指令)

export const loadmore = {
  inserted(el, binding) {
    const dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); // 获取下拉框元素
    dom.addEventListener('scroll', function () { // 监听元素触底
      const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 4; //加4是因为如果不加4不能触底
      if (condition) {
        binding.value();
      }
    });
  },
};

mian.js （全局引入所有的自定义指令）

import * as directives from '@/directives'
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

上述是全局引入的自定义指令，也可单独在某一个文件中使用 directives 注册一个自定义指令

页面中使用 （ v-loadmore=“loadmore”）

<el-select
  v-model="group"
  v-loadmore="loadmore"
>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  ></el-option>
</el-select>

  loadmore() {
	console.log("触底加载...")  
   },