el‐pagination - daniel-qa/Vue GitHub Wiki

el-pagination

  • 初始化流程

頁面進來就一次取得所有資料

設定到 allData

呼叫 updatePagedData() 顯示第 1 頁

  • 心法總結（適用前端分頁）

資料不變，只改切的位置 → 效能好、操作快

元件綁定要乾淨：el-table 綁 pagedData，el-pagination 綁 currentPage & pageSize

當然也可做搜尋或篩選後再分頁，動態分頁照樣 work 🎯

<template>
  <div>
    <el-table :data="pagedData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年齡" />
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="tableData.length"
      :page-sizes="[5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px; text-align: right;"
    />
  </div>
</template>

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

const tableData = ref([
  { name: '小明', age: 18 },
  { name: '小華', age: 22 },
  { name: '小美', age: 20 },
  { name: '小強', age: 25 },
  { name: '小艾', age: 19 },
  { name: '小豪', age: 23 },
  { name: '小柔', age: 21 },
  { name: '小杰', age: 24 },
])

const currentPage = ref(1)
const pageSize = ref(5)

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return tableData.value.slice(start, end)
})
</script>
⚠️ **GitHub.com Fallback** ⚠️