使用vue3+＜script setup＞+element-plus中el-table前端切片完成分页效果

<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(() => {// 假设从后端获取到的数据为 responseconst 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 方法来更新可见数据。

通过这样的实现，你可以在前端完成分页效果，并根据当前页码和每页显示的数据数量来展示对应的数据。