<template>
<div>
<el-table :data="visibleData" :row-key="row => row.id">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total"
></el-pagination>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
const tableData = reactive([]);
const visibleData = reactive([]);
const currentPage = ref(1); // 当前页码
const pageSize = 10; // 每页显示的数据数量
const total = ref(0); // 总数据量
const loadData = () => {
// 模拟异步请求数据
setTimeout(() => {
// 假设从后端获取到的数据为 response
const response = {
data: [], // 当前页的数据
total: 100 // 总数据量
};
tableData.splice(0, tableData.length, ...response.data);
total.value = response.total;
updateVisibleData();
}, 1000);
};
const updateVisibleData = () => {
const start = (currentPage.value - 1) * pageSize;
const end = currentPage.value * pageSize;
visibleData.splice(0, visibleData.length, ...tableData.slice(start, end));
};
const handleCurrentChange = (page) => {
currentPage.value = page;
updateVisibleData();
};
onMounted(loadData);
</script>
在上面的示例中,我们使用了?<script setup>
?语法来编写组件逻辑。通过?import
?引入所需的函数和变量,然后在?<script setup>
?中直接使用它们。
在?onMounted
?钩子函数中,我们调用?loadData
?方法来加载初始数据。
在?handleCurrentChange
?方法中,我们更新?currentPage
?的值,并调用?updateVisibleData
?方法来更新可见数据。
通过这样的实现,你可以在前端完成分页效果,并根据当前页码和每页显示的数据数量来展示对应的数据。