【VUE】为elementUi 下拉框添加动态加载数据

1、main.js自定义指令

Vue.directive('loadmore', {
  bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
      setTimeout(()=>{
          const SELECT_DOM = document.querySelector('.scrollSelect .el-select-dropdown__wrap')
          // 监听滚动
          SELECT_DOM.addEventListener('scroll', function() {
          // 滚动到底部是为true
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (CONDITION) {
              // 触发
              binding.value()
              }
          })
      },)
  }
})

2、使用

用v-loadmore自定义指令

添加popper-class="scrollSelect"

下拉框滚动到底部自动触发loadMore方法

el-select
  v-loadmore="loadMore"
  v-model="subParam.role_id"
  popper-class="scrollSelect"
  class="input-style"
  placeholder="请选择角色"
  transfer
  popper-append-to-body
>
  <el-option
    v-for="item in roleList"
    :key="item.id"
    :value="item.id"
    :label="item.rolename"/>
</el-option>