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=“加载事件名”即可实现

<el-select
  v-loadmore="loadPartner"
  v-model="listQuery.partner_id"
  placeholder="请选择或搜索团队"
  filterable clearable
  :filter-method="searchPartner"
  @change="handleFilter"
  @clear="searchPartner('',false)"
  @blur="searchPartner('')"
  class="input-item">
  <el-option
    v-for="item in partners"
    :key="item.id"
    :label="item.name"
    :value="item.id">
  </el-option>
</el-select>

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