element-ui select 组件下拉加载更多数据

在 element-ui 官网中，并没有提供 select 组件下拉滚动滚动条加载更多数据的事件，可以我们想到在数据的底部添加一个点击事件来加载更多数据，但是交互就没有那么友好了。

设置高度，当超过一个高度在加载一页数据，即实现加载更多数据。

// 针对 el-select 下拉框定义的一个分页指令：滚动到底部执行加载下一页
const selectLoadMore = Vue.directive('selectLoadMore',{
  bind (el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      const CONDITION = this.scrollHeight - this.scrollTop === this.clientHeight
      if (CONDITION) {
        binding.value()
      }
    })
  }
})
export { selectLoadMore }

在 select 组件中，添加指令。

  ......


loadmore () {
  // 调用接口，加载更多数据
}