vue如何實現表格分頁功能

# Vue如何實現表格分頁功能

## 前言

在現代Web應用中，數據表格是展示信息最常用的組件之一。當數據量較大時，分頁功能成為提升用戶體驗的關鍵技術。本文將詳細介紹如何在Vue框架中實現高效、靈活的表格分頁功能，涵蓋基礎實現、高級優化以及常見問題解決方案。

---

## 一、基礎分頁實現

### 1.1 核心概念

分頁功能主要包含三個要素：
- **當前頁碼**：用戶正在查看的頁面
- **每頁條數**：單頁顯示的數據量
- **總數據量**：決定分頁器頁數的依據

### 1.2 基礎代碼實現

```html
<template>
  <div>
    <!-- 表格展示 -->
    <table class="table">
      <thead>
        <tr>
          <th v-for="col in columns" :key="col">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in paginatedData" :key="item.id">
          <td v-for="col in columns" :key="col">{{ item[col] }}</td>
        </tr>
      </tbody>
    </table>

    <!-- 分頁控件 -->
    <div class="pagination">
      <button 
        @click="prevPage" 
        :disabled="currentPage === 1"
      >上一頁</button>
      
      <span>第 {{ currentPage }} 頁 / 共 {{ totalPages }} 頁</span>
      
      <button 
        @click="nextPage" 
        :disabled="currentPage === totalPages"
      >下一頁</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: ['id', 'name', 'age'], // 表頭
      data: [], // 原始數據
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    // 計算總頁數
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize)
    },
    // 獲取當前頁數據
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.data.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  },
  async created() {
    // 模擬API獲取數據
    this.data = await fetchData()
  }
}
</script>

1.3 關鍵點解析

1. 計算屬性優勢：使用computed屬性實現數據切片，確保響應式更新
2. 分頁算法：(currentPage - 1) * pageSize計算起始索引
3. 邊界控制：通過disabled屬性禁用邊界按鈕

二、高級功能擴展

2.1 動態每頁條數

<select v-model="pageSize" @change="currentPage = 1">
  <option value="5">5條/頁</option>
  <option value="10">10條/頁</option>
  <option value="20">20條/頁</option>
</select>

2.2 完整分頁器組件

<div class="pagination">
  <button @click="goToPage(1)" :disabled="currentPage === 1">首頁</button>
  <button @click="prevPage" :disabled="currentPage === 1">上一頁</button>
  
  <!-- 頁碼按鈕 -->
  <template v-for="page in displayedPages">
    <button 
      :key="page"
      @click="goToPage(page)"
      :class="{ active: page === currentPage }"
    >
      {{ page }}
    </button>
  </template>
  
  <button @click="nextPage" :disabled="currentPage === totalPages">下一頁</button>
  <button @click="goToPage(totalPages)" :disabled="currentPage === totalPages">末頁</button>
</div>

<script>
computed: {
  displayedPages() {
    const range = 2 // 顯示前后范圍
    let start = Math.max(1, this.currentPage - range)
    let end = Math.min(this.totalPages, this.currentPage + range)
    
    // 處理首尾顯示不全的情況
    if (this.currentPage - range <= 1) {
      end = Math.min(2 * range + 1, this.totalPages)
    }
    if (this.currentPage + range >= this.totalPages) {
      start = Math.max(1, this.totalPages - 2 * range)
    }
    
    return Array.from({length: end - start + 1}, (_, i) => start + i)
  }
}
</script>

2.3 服務器端分頁

async fetchPaginatedData() {
  const params = {
    page: this.currentPage,
    size: this.pageSize
  }
  const res = await api.get('/data', { params })
  this.data = res.data.items
  this.total = res.data.total // 服務器返回總條數
}

三、性能優化方案

3.1 虛擬滾動（大數據量場景）

<VirtualScroll 
  :items="paginatedData"
  :item-height="50"
  :visible-items="10"
>
  <template #default="{ item }">
    <tr>
      <td v-for="col in columns" :key="col">{{ item[col] }}</td>
    </tr>
  </template>
</VirtualScroll>

3.2 數據緩存策略

// 使用Map緩存已加載頁面數據
const pageCache = new Map()

async fetchPage(page) {
  if (pageCache.has(page)) {
    return pageCache.get(page)
  }
  const data = await api.fetchPage(page)
  pageCache.set(page, data)
  return data
}

四、常見問題解決方案

4.1 數據更新后頁碼異常

問題：數據過濾后當前頁可能超出范圍
解決：

watch: {
  filteredData(newVal) {
    const maxPage = Math.ceil(newVal.length / this.pageSize)
    if (this.currentPage > maxPage) {
      this.currentPage = maxPage || 1
    }
  }
}

4.2 分頁樣式沖突

推薦使用CSS作用域：

<style scoped>
.pagination /deep/ .active {
  background-color: #42b983;
}
</style>

五、完整組件封裝示例

<!-- PagedTable.vue -->
<template>
  <div class="paged-table">
    <!-- 表格主體 -->
    <slot name="table" :data="paginatedData">
      <default-table :data="paginatedData"/>
    </slot>
    
    <!-- 分頁器 -->
    <div class="pagination-controls">
      <div class="page-size-selector">
        <span>每頁顯示：</span>
        <select v-model="internalPageSize" @change="handlePageSizeChange">
          <option v-for="size in pageSizeOptions" :value="size">{{ size }}條</option>
        </select>
      </div>
      
      <slot name="pagination" :pageInfo="pageInfo">
        <default-pagination v-bind="pageInfo" @page-change="goToPage"/>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
    pageSize: Number,
    currentPage: Number,
    pageSizeOptions: {
      type: Array,
      default: () => [5, 10, 20, 50]
    }
  },
  data() {
    return {
      internalPageSize: this.pageSize || 10,
      internalCurrentPage: this.currentPage || 1
    }
  },
  computed: {
    pageInfo() {
      return {
        current: this.internalCurrentPage,
        total: Math.ceil(this.data.length / this.internalPageSize),
        pageSize: this.internalPageSize
      }
    },
    paginatedData() {
      const start = (this.internalCurrentPage - 1) * this.internalPageSize
      const end = start + this.internalPageSize
      return this.data.slice(start, end)
    }
  },
  methods: {
    goToPage(page) {
      this.internalCurrentPage = page
      this.$emit('page-change', page)
    },
    handlePageSizeChange() {
      this.internalCurrentPage = 1
      this.$emit('page-size-change', this.internalPageSize)
    }
  }
}
</script>

結語

本文從基礎到進階全面講解了Vue表格分頁的實現方案。實際開發中應根據項目需求選擇合適的分頁策略，對于簡單場景可使用客戶端分頁，大數據量推薦服務端分頁。良好的分頁交互能顯著提升用戶體驗，是Web開發中值得深入優化的功能點。

擴展建議：結合Vuex/Pinia管理分頁狀態，或使用現成組件庫如Element UI的Pagination組件快速實現。 “`

注：本文實際約2500字，完整3000字版本可擴展以下內容： 1. 添加具體性能對比數據 2. 增加單元測試實現示例 3. 詳細分析不同UI框架的分頁組件差異 4. 移動端分頁的特殊處理方案 5. 分頁與排序/篩選的聯動實現