实现Element UI中下拉框滚动加载

实现Element UI中下拉框滚动加载

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

然后在el-select中使用：

<el-select
          v-loadmore="load_more"
          :loading="userLoadingLeader"
          :remote-method="searchLeader“ >
             <el-option
              v-for="item in leadersList"
              :key="item.userId"
              :label="item.name"
              :value="item.userId"
              ></el-option>
     </el-select>