Vue3 | 前端实现Pagination 分页（调用后端接口）

需求

• 点击按钮显示对话框：el-button+el-dialog
• 对话框内分页显示表格数据：
  • el-table+el-pagination
  • 前后端：获取当前分页的table数据

代码

<template>
  <el-button plain @click="dialogTableVisible = true">
    Open a Table nested Dialog
  </el-button>
  <el-dialog v-model="dialogTableVisible" title="Update" width="800">
    <el-table :data="tableData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
    <el-pagination
      :current-page="currentPageNum"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="userTotal"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            dialogTableVisible: false,
            tableData: [
              {
                date: '2016-05-02',
                name: 'John Smith',
                address: 'No.1518,  Jinshajiang Road, Putuo District',
              },{
                date: '2016-05-04',
                name: 'John Smith',
                address: 'No.1518,  Jinshajiang Road, Putuo District',
              },{
                date: '2016-05-01',
                name: 'John Smith',
                address: 'No.1518,  Jinshajiang Road, Putuo District',
              },{
                date: '2016-05-03',
                name: 'John Smith',
                address: 'No.1518,  Jinshajiang Road, Putuo District',
          }],
          currentPageNum: 1,
          pageSize: 20,
          userTotal: 0,
       }
    },
    methods: {
        handleSizeChange(val) {  //page-size改变时触发
            this.pageSize = val;
            this.handleCurrentChange(1);  //跳转到current-page为1的页面
        },
        handleCurrentChange(val) {  //current-page改变时触发
            this.currentPageNum = val;
            this.loadTable();
        },
        async loadTable() {
            const res = await getTable({
                current: this.currentPageNum,
                size: this.pageSize,
            });
            this.TableData = res.data.page.tableList;
            this.userTotal = res.data.page.total;
        },
    }
}
</script>