el-select上拉加载数据

一、注册指令并在main.js引入

import Vue from 'vue'

var timer = ''
Vue.directive('loadmore', {
    bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      if (SELECTWRAP_DOM) {
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          // + 10 : 防止浏览器有时候不触底
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight + 10
          if (CONDITION) {
            if (timer) {
              clearTimeout(timer)
            }
            timer = setTimeout(() => {
              binding.value()
            }, 100)
          }
        })
      }
    }
  })

二、使用 

<el-select ref="select" v-loadmore="loadMore" class="select" :value="active"></el-select>

三、方法 

methods: {
    // 加载更多
    loadMore() {
      console.log('加载跟多')
      this.page += 1
      if (this.page <= this.total) {
        this.getList()
      }
    }
}