2024-01-06 el-select 无限下拉滚动加载数据

html

          <div>
              <el-select style="width: 300px;" @visible-change="seeChange" v-el-select-loadmore="loadmoreData" v-model="switchShopIdValue"
                placeholder="请选择店铺" @change="changeShopInfo" filterable remote reserve-keyword
                :remote-method="remoteMethod" :loading="loading">
                <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>

script

  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 - this.scrollTop <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
    },
  },

methods

    seeChange(val) {
      if (!val) {
        this.keyWord = ''
      }
    },

    // 懒加载
    loadmoreData() {
      if (this.loadmore) {
        this.page.current = this.page.current + 1;
        this.getShopList();
      }
    },

    // //店铺选择
    changeShopInfo(e) {
      this.shopId = e;
    },

    remoteMethod(query) {
      this.keyWord = query
      if (query != "") {
        this.loading = true;
        getShopList({
          current: 1,
          size: 12, name: query
        }).then((res) => {
          let shopList = res.data.data.records
          this.shopList = shopList;
          if (shopList.length > 0) {
            this.changeShopInfo(shopList[0].id);
          }
          this.getShopInfo(this.switchShopId)
          this.loading = false;
        });
      }
    },

    getShopList() {
      // this.loading = true;
      getShopList(Object.assign({ name: this.keyWord }, this.page)).then(response => {
        let dataList = response.data.data.records;
        this.shopList = [...this.shopList, ...dataList];
        if (dataList.length < this.page.size) {
          this.loadmore = false;
        }
        this.getShopInfo(this.switchShopId)

        // this.loading = false;
        //let storeSwitchShopId = getStore({name: 'switchShopId'})
        // if (shopList.length > 0
        //   && (!storeSwitchShopId || this.shopList.findIndex(item => item.id === storeSwitchShopId) == -1)) {
        //   //没有切换租户或没有绑定该切换租户，则默认切换到第一个租户
        //   setStore({
        //     name: 'switchTenantId',
        //     content: tenantListMy[0].id
        //   })
        //   this.switchTenantId = tenantListMy[0].id
        //   setTimeout(() => {
        //     this.$router.go(0)
        //   }, 500);
        // }
      })
    },