当前位置：首页 > VUE

vue分页实现原理

2026-03-08 19:00:45VUE

Vue 分页实现原理

Vue 分页的核心原理是通过计算当前页的数据范围，动态渲染分页按钮和数据列表。通常结合后端接口的分页参数（如 page 和 pageSize）或前端本地数据分页实现。

分页数据计算

分页需要根据当前页码和每页条数计算数据的起始和结束索引：

vue分页实现原理

起始索引：(currentPage - 1) * pageSize
结束索引：currentPage * pageSize 通过 slice 方法截取当前页数据：
```
const paginatedData = data.slice(startIndex, endIndex);
```

分页按钮逻辑

总页数由数据总量和每页条数决定：totalPages = Math.ceil(total / pageSize)
分页按钮通常包括上一页、下一页、页码按钮（可能带省略号优化显示）。

关键代码示例

// 计算当前页数据
computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.items.slice(start, end);
  },
  totalPages() {
    return Math.ceil(this.items.length / this.pageSize);
  }
}

实现方式

前端本地分页

适用于数据量较小的情况，直接在前端对完整数据集进行分页计算：

vue分页实现原理

存储所有数据在 data 中。
通过计算属性动态返回分页后的数据。
切换页码时更新 currentPage 触发重新计算。

后端分页

适用于大数据量场景，通过 API 传递分页参数：

请求接口时携带 page 和 pageSize 参数。
后端返回当前页数据和总条数（用于计算总页数）。
切换页码时重新请求接口。

分页组件封装

可封装通用分页组件，接收 total、current-page 等 props，通过事件（如 page-change）通知父组件页码变化：

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span v-for="page in pageRange" :key="page" @click="goToPage(page)">
      {{ page }}
    </span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>