element-ui select选择器滑动加载下一页

1.配置js文件(底部触发命令)

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

2.在main.js中引入分页加载

import { loadMore } from "@/directives";
Vue.directive("loadmore", loadMore);

3.在文件中使用

<el-form-item label="选择频率">
                <el-select
                  clearable
                  v-model="formInline.channelId"
                  size="mini"
                  placeholder="选择频率"
                  style="width: 126px"
                  @change="selectChannel"
                  v-loadmore="loadmore"
                >
                  <el-option
                    v-for="(item, index) in departmentList"
                    :key="index"
                    :label="item.channelName"
                    :value="item.channelId"
                  ></el-option>
                </el-select>
              </el-form-item>

   //滑动触底的相关操作
   loadmore(){
     // console.log('我滑动加载了');
    //数据页面更新，数据请求操作
    },