element-plus前端分页

<template>
  <div>
    <el-table :data="paginatedData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <!-- 其他列 -->
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const data = ref([
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 },
      // 更多数据
    ]);

    const currentPage = ref(1);
    const pageSize = ref(10);

    const total = computed(() => data.value.length);

    const paginatedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return data.value.slice(start, end);
    });

    const handlePageChange = (page) => {
      currentPage.value = page;
    };

    return {
      data,
      currentPage,
      pageSize,
      total,
      paginatedData,
      handlePageChange,
    };
  },
};
</script>