如何在 Vue 應用程式中實現分頁

分頁可讓您將大型資料集劃分為更小、更易於管理的區塊。分頁使用戶可以更輕鬆地瀏覽大型資料集並找到他們想要的資訊。

開始使用 Vue-Awesome-Paginate

Vue-awesome-paginate是一個強大且輕量級的 Vue 分頁庫，可以簡化建立分頁資料顯示的過程。它提供全面的功能，包括可自訂的元件、易於使用的 API 以及對各種分頁場景的支援。

若要開始使用 vue-awesome-paginate，請在專案目錄中執行以下終端命令來安裝軟體包：

npm install vue-awesome-paginate

然後，要配置該套件以在您的 Vue 應用程式中工作，請將以下程式碼複製到src/main.js檔案：

import { createApp } from "vue";import App from "./App.vue";import VueAwesomePaginate from "vue-awesome-paginate";import "vue-awesome-paginate/dist/style.css";createApp(App).use(VueAwesomePaginate).mount("#app");

此程式碼使用.use()方法匯入並註冊包，因此您可以在應用程式中的任何位置使用它。分頁包附帶一個 CSS 文件，程式碼區塊也會匯入該文件。

建立測試 Vue 應用程式

為了說明 vue-awesome-paginate 套件的工作原理，您將建立一個顯示範例資料集的 Vue 應用程式。您將使用 Axios 從 API 中取得此應用程式的資料。

將下面的程式碼區塊複製到您的App.vue檔案中：

<script setup>import { ref, onBeforeMount } from "vue";import axios from "axios";const comments = ref([]);const loadComments = async () => { try { const response = await axios.get( `https://jsonplaceholder.typicode.com/comments`, ); return response.data.map((comment) => comment.body); } catch (error) { console.error(error); }};onBeforeMount(async () => { const loadedComments = await loadComments(); comments.value.push(...loadedComments); console.log(comments.value);});</script><template> <div> <h1>Vue 3 Pagination with JSONPlaceholder</h1> <div v-if="comments.length"> <div v-for="comment in comments" class="comment"> <p>{{ comment }}</p> </div> </div> <div v-else> <p>Loading comments...</p> </div> </div></template>

此程式碼區塊使用Vue Composition API來建構元件。此元件在 Vue 掛載之前使用 Axios 從 JSONPlaceholder API 取得註解（onBeforeMount掛鉤）。然後，它將評論儲存在評論數組中，使用模板顯示它們或載入訊息，直到評論可用。

將 Vue-Awesome-Paginate 整合到您的 Vue 應用程式中

現在您有一個簡單的 Vue 應用程序，可以從 API 獲取數據，您可以修改它以整合 vue-awesome-paginate 包。您將使用此分頁功能將評論分為不同的頁面。

將App.vue檔案的腳本部分替換為以下程式碼：

<script setup>import { ref, computed, onBeforeMount } from 'vue';import axios from 'axios';const perPage = ref(10);const currentPage = ref(1);const comments = ref([]);const onClickHandler = (page) => { console.log(page);};const loadComments = async () => { try { const response = await axios.get( `https://jsonplaceholder.typicode.com/comments` ); return response.data.map(comment => comment.body); } catch (error) { console.error(error); }};onBeforeMount(async () => { const loadedComments = await loadComments(); comments.value.push(...loadedComments); console.log(comments.value);});const displayedComments = computed(() => { const startIndex = (currentPage.value * perPage.value) - perPage.value; const endIndex = startIndex + perPage.value; return comments.value.slice(startIndex, endIndex);});</script>

此程式碼區塊添加了兩個更多的反應性參考：perPage和currentPage。這些引用分別儲存每頁顯示的項目數和目前頁碼。

該程式碼還建立一個名為displayedComments的計算引用。這將根據currentPage和perPage值計算評論範圍。它會傳回該範圍內的評論數組的一部分，這會將評論分組到不同的頁面。

現在，將App.vue 檔案的範本部分替換為以下內容：

<template> <div> <h1>Vue 3 Pagination with JSONPlaceholder</h1> <div v-if="comments.length"> <div v-for="comment in displayedComments" class="comment"> <p>{{ comment }}</p> </div> <vue-awesome-paginate : total-items="comments.length" : items-per-page="perPage" : max-pages-shown="5" v-model="currentPage" : onclick="onClickHandler" /> </div> <div v-else> <p>Loading comments...</p> </div> </div></template>

此範本部分中用於呈現清單的 v-for 屬性指向 displayedComments 陣列。該模板新增了 vue-awesome-paginate 元件，上面的程式碼片段將 props 傳遞給該元件。

設定應用程式樣式後，您應該得到一個如下所示的頁面：

點擊每個編號按鈕，您將看到一組不同的評論。

使用分頁或無限滾動以獲得更好的數據瀏覽效果

現在您已經有了一個非常基本的 Vue 應用程序，它演示瞭如何有效地對資料進行分頁。您也可以使用無限滾動來處理應用程式中的長資料集。請確保在選擇之前考慮應用程式的需求，因為分頁和無限滾動各有利弊。