el-select滑动触底自动加载更多

一，新增loadmore.js文件

export default {
  bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector(
      '.el-select-dropdown .el-select-dropdown__wrap'
    )

    if (!SELECTWRAP_DOM) {
      return
    }

    SELECTWRAP_DOM.addEventListener('scroll', function () {
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (CONDITION) {
        console.log(binding)
        binding.value()
      }
    })
  }
}

二，新建指令统一导出的文件redirect.js

import loadmore from './loadmore'

const install = function (Vue) {
  Vue.directive('loadmore', loadmore)
}

if (window.Vue) {
  window['loadmore'] = loadmore
  Vue.use(install) // eslint-disable-line
}

export default install

三，在main.js注册使用

import directive from './directive' //directive
Vue.use(directive)

四，在页面使用

 <el-form-item label="标签">
          <el-select
            v-model="form.tagText"
            style="width: 800px"
            placeholder="请选择"
            clearable
            multiple
            @change="bindChange"
            value-key="id"
             v-loadmore="loadMore"
          >
            <el-option
              v-for="item in tagList"
              :key="item.id"
              :label="item.name"
              :value="item"
              class="xxx"
            >
            </el-option>
          </el-select>
        </el-form-item>

五，在loadMore方法中具体实现请求