element plus table组件搭配分页

<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 之间的数据。