Pagination 分頁

把長列表切成頁。使用 Element Plus 的 el-pagination。

設計準則

• 列表頁標準 layout:total, sizes, prev, pager, next, jumper(總數 + 每頁筆數 + 頁碼 + 跳頁),放表格右下方
• 每頁筆數檔位統一 10 / 20 / 50 / 100,預設 20
• 簡單場景(卡片內的小列表)用精簡 layout(prev, pager, next)+ small
• 列表頁建議開 background,頁碼更清楚
• 切頁後捲回列表頂部;篩選條件改變時回到第 1 頁

基本用法

loading

尺寸

列表頁用預設;卡片內、彈窗內的小列表用 small:

loading

附加功能

依需求組合 layout:要總數加 total、要換每頁筆數加 sizes、頁數多加 jumper:

loading

列表頁標配

loading

只有一頁時隱藏

資料常常不到一頁的區塊(卡片內小列表)開 hide-on-single-page,不佔空間; 主列表頁不建議開——分頁列上的總筆數本身就是資訊:

loading

Do / Don't

✅ Do	❌ Don't
列表頁用完整 layout	只給上一頁/下一頁翻 500 筆
筆數檔位統一 10/20/50/100	每頁筆數各頁自訂
篩選變更回第 1 頁	停在第 7 頁看新篩選結果

給工程師

完整 API 見 Element Plus Pagination 文件。 本站規範優先於 EP 文件中的視覺建議。