EL-SELECT懒加载（自定义指令LOADMORE）

01### 自定义loadmore触底加载指令

01创建directives.js，放在utils文件夹下；代码如下：

import Vue from 'vue'
 
 //组件el-select下拉框
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-autocomplete输入框
Vue.directive('loadmore2', {
  bind(el, binding, vnode){
    let wrapDom = el.querySelector(".el-autocomplete-suggestion__wrap")
    let listDom = el.querySelector(".el-autocomplete-suggestion__wrap .el-autocomplete-suggestion__list")
    wrapDom.addEventListener("scroll",(e)=>{
        let condition = wrapDom.offsetHeight + wrapDom.scrollTop - 20 - listDom.offsetHeight
        if(condition > 0 && !vnode.context.loading){
            //滚动到底部则执行滚动方法load，binding.value就是v-scrollLoad绑定的值，加()表示执行绑定的方法
            binding.value()
        }
    },false)
  }
})

02在main.js中全局引用：// import ‘@/utils/directives.js’

import directives from '@/utils/directives.js'
Vue.use(directives);
// 或者直接
import '@/utils/directives.js'

02使用

          <el-form-item label="所在小组：" label-width="100px" class="required">
            <el-select
              value-key="code"
              id="groupLimit"
              filterable
              remote
              v-model="formLabelAlign.groupId"
              placeholder="请选择"
              popper-class="popperselect"
              v-loadmore = "groupMore"
              :remote-method="remoteGroup"
            >
              <el-option
                v-for="item in groupOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

data() {
    return {
    groupOptions: [],
    groupParams:{
        pageNumber: 1,
        pageSize: 9,
        groupName:""
      }
    };
  },

    // 调接口获取小组数据
    initdate() {
      serviceApi.getAllGroup(this.groupParams).then((res) => {

        this.groupOptions = res.result.list
        this.groupOptions = [
            { groupName: "全部", groupId: "" },
            ...this.groupOptions
          ];
        this.formLabelAlign.groupId = this.$route.query.groupName;
      });
    },
    //小组搜索
    remoteGroup(query) {
      this.groupParams.loadGroupName = query;
      const groupList = this.groupOptions;
      if (query !== "") {
        this.groupOptions = [];
        this.initdate()
          console.log(555555555555555,this.groupOptions);
      }
    },
    //小组触底加载
    groupMore() {
      this.groupParams.groupPageNumber++;
      this.initdate()
    },