<template> <PageNationTable :handleChangePage="handleChangePage" :data="pageData"> <!-- normal element table here --> <el-table :data="tableData" style="width: 100%;" height="100%"> <el-table-column prop="id" label="id" width="120" /> <el-table-column prop="roleName" label="角色名" width="120" /> <el-table-column prop="roleDescription" label="描述" width="120" /> <el-table-column prop="createTime" label="创建时间" width="200" /> <el-table-column prop="updateTime" label="更新时间" width="200" /> </el-table> </PageNationTable> </template> <script setup> import PageNationTable from '../components/PageNationTable.vue'; import { reactive, ref } from 'vue' import http from '../../http' // fetch data -> get data and page info -> ref([]) // -> show in table // -> pass to this compoment to show pagination const tableData = ref([ ]) // 定义分页参数 const pageData = reactive({ page: 1, size: 2, total: 0 }); // 页码点击事件 function handleChangePage(e) { pageData.page = e fetchRoles() } // 页面数据查询接口 fetchRoles() async function fetchRoles() { const res = await http.get('/api/role/list?' + new URLSearchParams({pageNum: pageData.page, pageSize: pageData.size})) const { list, page, total } = res.data; pageData.page = page pageData.total = total tableData.value = list } </script> <style> </style>