Element下拉框实现滚动加载更多功能实现

Element下拉框实现滚动加载更多功能实现

需求：下拉框默认显示20条数据，可使用远程搜索为显示的数据，但是部分用户喜欢滚动选择。

如图所示，el-select官方事件并没有监听滚动的事件，所以我们可以采用vue的directives自定义指令实现。

el-selectEvents.png

首选在src也就是main.js的同级目录下新建一个directives.js文件

import Vue from 'vue'
let MyDirective = {}
export default MyDirective.install = function(vue, options) {
  Vue.directive('loadmore', {
    bind (el, binding) {
      const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      selectDom.addEventListener('scroll', function () {
        const isEnd = this.scrollHeight - this.scrollTop <= this.clientHeight
        if (isEnd) {
          binding.value()
        }
      })
    }
  })
}

在main.js中引入并注册

import directives from './directives'
// 全局注册指令
Vue.use(directives)

index.vue 在下拉框中加入v-loadmore=“加载事件名”即可实现

注意：其他细节自行注意，例如加载到底或者下拉框有联动等。