随笔47-在element-ui的select下拉框加上滚动触底事件

1、在项目的main.js里注册
// 注册滚动条加载触发事件v-loadmore绑定

Vue.directive('loadmore', {

  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()

      }

    })

  }

})

----------------------------------------------------

v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听

scrollHeight 获取元素内容高度(只读)

scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

clientHeight 读取元素的可见高度(只读)

如果元素滚动到底, 下面等式返回true, 没有则返回false

scrollHeight - scrollTop === clientHeight

2.在需要的下拉地方写方法 如下图：

借鉴于https://blog.csdn.net/weixin_30498921/article/details/95057744