el-select实现懒加载（自定义指令）_el-select懒加载

el-select下拉框懒加载实现

直接上代码 

页面结构部分

    <div>
        选择活动：
        <el-select
          filterable
          v-model="activity"
          style="width: 300px"
          @change="selectChange"
         //自定义指令 （懒加载方式）
          v-el-select-lazyloading="lazyloading"
        >
          <el-option
            :label="item.practiceName"
            :value="item.id"
            v-for="item in activityList"
            :key="item.id"
          ></el-option>
        </el-select>
      </div>

data数据

// 分页（懒加载使用）
      listData: {
        limit: 8,
        page: 1,
      },
      activityList：[],

自定义指令

 
  directives: {
    "el-select-lazyloading": {
      bind(el, binding) {
        let SELECT_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECT_DOM.addEventListener("scroll", function () {
          let condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },

方法

methods: {
    // 下拉框懒加载
    lazyloading() {
      this.listData.page++;
      this.getList();
    },
    //请求
    getList() {
      this.$http
        .get(`/****/******/****`, {
          params: {
            id: this.id,
            limit: this.listData.limit,
            page: this.listData.page,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.activityList = [...this.activityList, ...res.data.list];
        });
    }
  }

思路：通过监视el-select的下拉框滚动行为，当滚动到底部触发执行函数去请求新的数据，将新请求到的数据插入到当前数据中实现懒加载的功能。

*个人总结记录，节省部分脑细胞~，也欢迎各位遇到同样问题的同学前来参考~~~

有问题的话欢迎各位大佬指导，给予更优解~~~