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

参考文献

     <!-- template -->
    <el-select v-model="val" v-loadmore="selectLoadMore" value-key="brand_id">
        <el-option
          v-for="item in options"
          :key="item.brand_id"
          :label="item.display_brand_name"
          :value="item"/>
    </el-select>

    //vue指令
    import Vue from "vue";
    // 针对 el-select 下拉框定义的一个分页指令：滚动到底部执行加载下一页
    export default 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();
          }
        });
      }
    });
    
    
    //使用
    //引入
   import loadmore from "@/directive/el-select";
   //注册
    export default {
      directives: {
        loadmore,
      },
        methods: {
            selectLoadMore(){
                //触发逻辑...
            }
      },

  }