VUE中的分頁組件的示例

實現可複用的Vue分頁組件需明確以下要點：1.定義props包括總條數、每頁條數和當前頁碼；2.計算總頁數；3.動態生成顯示的頁碼數組；4.處理頁碼點擊事件並傳遞給父組件；5.添加樣式與交互細節。通過props接收數據並設置默認值，利用computed屬性計算總頁數，使用方法生成當前顯示的頁碼數組，模板中渲染按鈕並綁定點擊事件觸發update:current-page事件，在父組件中監聽事件更新當前頁碼，最後通過CSS高亮當前頁碼並控制按鈕狀態以提升用戶體驗。

如果你正在用Vue 開發一個需要分頁功能的項目，比如後台管理系統或者內容展示平台，那實現一個可複用的分頁組件是很有必要的。這裡就簡單講幾個關鍵點，並給出一個基礎但實用的Vue 分頁組件示例。

基本結構和數據準備

在寫組件之前，先理清楚你需要的數據：

• 當前頁碼（currentPage）
• 總條數（totalItems）
• 每頁顯示多少條（pageSize）
• 可選：最大顯示頁碼按鈕數（如最多顯示5 個頁碼）

你可以把這些作為props 或者從父組件傳入。例如：

 props: {
  total: { type: Number, required: true },
  pageSize: { type: Number, default: 10 },
  currentPage: { type: Number, default: 1 }
}

然後根據這些計算出總頁數：

 computed: {
  totalPages() {
    return Math.ceil(this.total / this.pageSize)
  }
}

渲染頁碼按鈕

常見的做法是只顯示當前頁左右各一兩個頁碼，避免按鈕太多。比如當前是第5 頁，最多顯示5 個按鈕，那麼應該顯示3、4、5、6、7。

你可以通過一個方法生成要顯示的頁碼數組：

 methods: {
  getPageNumbers() {
    const maxButtons = 5
    const pages = []
    const half = Math.floor(maxButtons / 2)

    let start = Math.max(1, this.currentPage - half)
    let end = Math.min(this.totalPages, start maxButtons - 1)

    // 如果接近末尾，往前調整起點if (end - start < maxButtons - 1) {
      start = Math.max(1, end - maxButtons 1)
    }

    for (let i = start; i <= end; i ) {
      pages.push(i)
    }

    return pages
  }
}

這樣就可以在模板中渲染出動態的頁碼按鈕了。

處理頁碼點擊和事件傳遞

當用戶點擊某個頁碼時，你應該通過$emit把新的頁碼值傳給父組件，讓它來處理數據更新。

 <div class="pagination">
  <button @click="$emit(&#39;update:current-page&#39;, 1)" :disabled="currentPage === 1">首頁</button>
  <button v-for="page in pageNumbers" 
          :key="page"
          @click="$emit(&#39;update:current-page&#39;, page)"
          :class="{ active: currentPage === page }">
    {{ page }}
  </button>
  <button @click="$emit(&#39;update:current-page&#39;, totalPages)" :disabled="currentPage === totalPages">末頁</button>
</div>

在父組件中使用這個分頁組件時可以這樣綁定：

 <Pagination 
  :total="100" 
  :current-page="currentPage" 
  @update:current-page="currentPage = $event"
/>

樣式與交互細節

• 給當前頁加個高亮樣式.active是很常見的做法。
• 禁用“上一頁”或“下一頁”按鈕也可以加上，避免無效操作。
• 如果頁碼太多，還可以加入省略號（…）表示中間有隱藏頁碼，不過這會稍微複雜一點。
• 移動端建議簡化按鈕數量，防止誤觸。

基本上就這些。一個簡單的分頁組件不需要太複雜，但邏輯清晰、交互合理就很實用了。

以上是VUE中的分頁組件的示例的詳細內容。更多資訊請關注PHP中文網其他相關文章！