el-select 远程搜索 懒加载

参考链接：el-select实现远程搜索和懒加载_select 懒加载_qd-hhkj的博客-CSDN博客

自定义懒加载

directives: {
    //注意：这个是写到data外面
    "el-select-loadmore": {
      bind(el, binding) {
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function () {
          const condition =
            this.scrollHeight - Math.ceil(this.scrollTop) <=
            this.clientHeight + 1;
          if (condition) {
            binding.value();
          }
        });
      },
    },
}

HTML

定义变量

      // 是否正在加载中
      customerLoading: false,
      // 加载开关，加载所有后端数据后控制懒加载是否继续执行，主要防止加载到最后一条数据时，还会继续加载
      customerStopLoading: false,
      // 客户列表下拉框分页参数
      csContactOptions: [],
      customerPageData: {
        current: 1, //当前页
        size: 10, //每页显示条数
      }

方法

/**
    * 懒加载客户列表+远程搜索
    */
    lazyLoadingOfCustomerList() {
      if (!this.customerStopLoading) {
        this.customerPageData.current++;// 搜索下一页数据
        this.customerListRemoteMethod(this.$refs.customerLazy.query, true); //调用后端接口获取下拉框数据，此时第二个参数必须传 true，懒加载方式调用后端接口函数
      }
    },
    customerListRemoteMethod(query,lazy=false){
      // 正在加载中
      this.customerLoading = true;
      // 获取分页参数
      let param = {
        pageNum: this.customerPageData.current,
        pageSize: this.customerPageData.size,
        orderByColumn: "createTime",
        isAsc: "desc"
      };
      // 如果不是懒加载，则是第一次加载，重置分页参数
      if(lazy === false){
        this.csContactOptions = []
        this.customerPageData.current = 1;
        this.customerPageData.size = 10;
      }
      // 是否有搜索条件
      if(typeof(query)=='string'){
        param.contactsNumber = query;
        listContacts(param).then(res => {
          if (res.code === 200) {
            this.customerLoading = false;
            if((Math.floor(res.total/this.customerPageData.current)+1)<1)
            {
              this.customerStopLoading=true  // 设置停止懒加载为true
              // 直接停止执行，否则会导致下面请求数据处理添加导致重复数据
              return
            }
            this.csContactOptions = [...this.csContactOptions, ...res.rows];
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
          }
        });
      }
      else {
        // 如果是获取焦点调用本函数（第一次调用），参数val不是字符串，而是对象，此时直接查询第一页数据
        let param = {
          pageNum: 1,
          pageSize: 10,
          orderByColumn: "createTime",
          isAsc: "desc"
        }
        // 这里很重要，获取焦点第一次加载时打开懒加载开关，否则一个页面多个懒加载的的话会导致一个懒加载关闭其他都不能懒加载了。
        this.customerStopLoading=false
        listContacts(param).then(res => {
          console.log(res.code)
          if (res.code === 200) {
            this.customerLoading = false;
            if((Math.floor(res.total/10)+1)<1)
            {
              this.customerStopLoading=true  // 设置停止懒加载为true
              // 直接停止执行，否则会导致下面请求数据处理添加导致重复数据
              return
            }
            this.csContactOptions = [...this.csContactOptions, ...res.rows];
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
          }
        });
    }
  },