elementUI InfiniteScoll无限滚动,分页查询

考虑到项目中一些列表信息，全部显示会导致加载缓慢，故而实现分页显示，利用v-infinite-scroll滚到到底部，触发分页查询

<template>
  <div>
    <div class="infinite-list-wrapper" style="overflow: auto">
      <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
      >
        <li v-for="item in satelliteList" class="list-item" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>
<script>
import { satelliteGetPagedSatellites } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      condition: {
        pageNo: 1,
        pageSize: 10,
      },
      satelliteList: [],
      totalNumber: 0,
      totalPages: 0,
    };
  },
  computed: {
    noMore() {
      return this.satelliteList.length > this.totalNumber;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  watch: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loading = false;
      this.condition.pageNo = 1;
      this.satelliteList = [];
      this.totalNumber = 0;
      this.totalPages = 0;
    },
    load() {
      this.loading = true;
      this.getPagedSatellites();
    },
    async getPagedSatellites() {
      let pInfo = await satelliteGetPagedSatellites(this.condition);
      pInfo.data.data.content.forEach((item) => {
        this.satelliteList.push({
          id: item.satelliteId,
          name: item.satelliteCname,
        });
      });
      this.totalNumber = pInfo.data.data.totalElements;
      this.totalPages = pInfo.data.data.totalPages;
      this.loading = false;
      if (this.condition.pageNo>this.totalPages) {
        return;
      }
      this.condition.pageNo++;
    },
  },
};
</script>
<style lang="scss" scoped>
.infinite-list-wrapper {
  position: absolute;
  width: 220px;
  height: 300px;
  top: 200px;
  background: white;
  margin-left: 30px;
}
.list {
  list-style: none;
}
</style>