vue 分页的实现

实现 Vue 分页的基本方法

在 Vue 中实现分页功能通常需要结合前端分页和后端分页两种方式。前端分页适合数据量较小的情况，后端分页适合大数据量场景。

前端分页实现

1. 数据分片处理 使用 slice 方法对数组进行分页处理：

   computed: {
     paginatedData() {
       const start = (this.currentPage - 1) * this.pageSize
       const end = start + this.pageSize
       return this.allData.slice(start, end)
     }
   }

2. 分页组件 创建分页按钮组件：

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

后端分页实现

1. API 请求参数 发送请求时带上分页参数：

   methods: {
     fetchData() {
       axios.get('/api/data', {
         params: {
           page: this.currentPage,
           size: this.pageSize
         }
       }).then(response => {
         this.data = response.data.items
         this.total = response.data.total
       })
     }
   }

2. 分页控制逻辑 监听页码变化重新获取数据：

   

   watch: {
     currentPage() {
       this.fetchData()
     }
   }

使用第三方分页组件

Element UI 分页组件示例：

<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  layout="prev, pager, next">
</el-pagination>

Vant 分页组件示例：

<van-pagination
  v-model="currentPage"
  :total-items="total"
  :items-per-page="pageSize"
  @change="onPageChange" />

分页样式优化技巧

1. 响应式分页 根据屏幕宽度调整每页显示数量：

   

   mounted() {
     window.addEventListener('resize', this.handleResize)
     this.handleResize()
   },
   methods: {
     handleResize() {
       this.pageSize = window.innerWidth < 768 ? 5 : 10
     }
   }

2. 分页信息显示 添加当前页数据范围提示：

   <div class="page-info">
     显示 {{ (currentPage-1)*pageSize+1 }}-{{ Math.min(currentPage*pageSize, total) }} 条，共 {{ total }} 条
   </div>

性能优化建议

1. 虚拟滚动分页 对于超大数据量，考虑使用虚拟滚动技术替代传统分页。

2. 数据缓存 实现页面数据缓存，避免重复请求已加载过的页面数据。

3. 预加载机制 提前加载下一页数据，提升用户体验。

以上方法可以根据实际项目需求组合使用，构建适合业务场景的分页解决方案。