vue3+springboot2+element-plus分页查询代码

前端代码（使用Vue3和Element Plus）：

<template>
  <div>
    <el-table :data="tableData" stripe>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { ref } from 'vue';
import { getTableData } from '@/api/example';

export default {
  setup() {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const tableData = ref([]);

    async function getData() {
      const params = {
        currentPage: currentPage.value,
        pageSize: pageSize.value,
      };
      const res = await getTableData(params);
      if (res.code === 200) {
        tableData.value = res.data.list;
        total.value = res.data.total;
      }
    }

    function handleCurrentChange(page) {
      currentPage.value = page;
      getData();
    }

    getData();

    return {
      currentPage,
      pageSize,
      total,
      tableData,
      handleCurrentChange,
    };
  },
};
</script>

后端代码（使用Spring Boot 2）：

@GetMapping("/tableData")
public CommonResult<PageResult<TableData>> getTableData(@RequestParam(required = false, defaultValue = "1") Integer currentPage,
                                                        @RequestParam(required = false, defaultValue = "10") Integer pageSize) {
    PageResult<TableData> pageResult = tableDataService.getTableData(currentPage, pageSize);
    return CommonResult.success(pageResult);
}

其中，`TableData`为实体类，`PageResult`为分页结果类。`tableDataService`为对应的Service类，用于查询数据。