使用axios+elementui完成分页查询功能

<template>
<!-- 分页 -->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pageNum"
  :page-sizes="[10, 20, 30, 40, 50]"
  :page-size.sync="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="parseInt(total)"
 />
</template>

<script>
<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      searchForm: {
        stationName: "",
        status: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: null,
      rows: [],
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    getData() {
      axios
        .get("http://localhost:8989/system/station/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getData();
    },
    onSubmit(searchForm) {
      this.getData();
    },
  },

  mounted() {
    this.getData();
  },
};
</script>