实现分页加载，加载更多(按钮类型），滚动加载的方式

<template>
  <div>
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :pageSize="pageSize"
      :total="total"
      @current-change="handleChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import { Pagination, Button } from "element-ui"; //局部引入分页组件
export default {
  name: "demo",
  components: {
    [Pagination.name]: Pagination,
  },
  data() {
    return {
      pageSize: 3,
      pageNum: 1,
      total: 0,
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.axios
        .get("/orders", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
          },
        })
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //分页器分页
    handleChange(pageNum) {
      this.pageNum = pageNum;
      this.getOrderList();
    },
  },
};
</script>

<style></style>

<template>
  <div>
    <el-button type="primary" :loading="loading" @click="loadMore"
      >加载更多</el-button
    >
  </div>
</template>
<script>
import { Button } from "element-ui"; //局部引入分页组件
export default {
  name: "demo",
  components: {
    [Button.name]: Button,
  },
  data() {
    return {
      pageSize: 3,
      pageNum: 1,
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.axios
        .get("/orders", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
          },
        })
        .then((res) => {
          this.list = this.list.concat(res.list);//拼接原数据
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    loadMore() {
      this.getOrderList();
    },
  },
};
</script>
<style></style>