当前位置: 首页 > 工具软件 > v-selectpage > 使用案例 >

el-select实现懒加载(自定义指令)

邢英奕
2023-12-01

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的下拉框滚动行为,当滚动到底部触发执行函数去请求新的数据,将新请求到的数据插入到当前数据中实现懒加载的功能。

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

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

 类似资料: