<template><div><el-table :data="tableData?.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"><el-table-column prop="date" label="Date" align="center"/><el-table-column prop="name" label="Name" align="center"/><el-table-column prop="address" label="Address" align="center"/></el-table><!-- 分页 --><div class="demo-pagination-block"><el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"layout="total, sizes, prev, pager, next, jumper" :total="tableData?.length" /></div></div>
</template><script setup>
import { ref } from "vue";
// 默认页数
const currentPage = ref(1);
// 分页的默认数
const pageSize = ref(5);const tableData = ref([{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',}, {date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',}
]);</script>
<style scoped>
.demo-pagination-block+.demo-pagination-block {margin-top: 10px;
}.demo-pagination-block .demonstration {margin-bottom: 16px;
}.demo-pagination-block {padding: 15px;background-color: white;display: flex;justify-content: center;
}
</style>
-
tableData：这是一个数组，它包含了所有的数据。
-
slice()：这是 JavaScript 中数组的一个方法，它用于从原数组中提取一个新的子数组，原数组不受影响。slice() 方法接受两个参数：start 和 end，分别表示切片的起始位置和结束位置（不包括 end）。
-
(currentPage - 1) * pageSize：这是计算分页起始位置的表达式。
currentPage 是当前页的页码。pageSize 是每一页显示的数据条数。(currentPage - 1) * pageSize 表示当前页应该从数组的哪个位置开始提取数据。例如，如果当前页是第 2 页，每页显示 10 条数据，那么起始位置就是 (2 - 1) * 10 = 10，即从索引 10 开始提取数据。
-
currentPage * pageSize：这是分页的结束位置。
- 它表示当前页的数据应该截取到数组中的哪个位置。例如，如果当前页是第 2 页，每页显示 10 条数据，那么结束位置就是
2 * 10 = 20，即从索引 0 到索引 19 之间的数据。
