用vue怎样实现分页

使用Vue实现分页功能

分页功能通常需要结合后端API返回的数据和前端UI组件实现。以下是基于Vue 3的常见实现方式（Vue 2类似，部分语法需调整）：

基础分页逻辑实现

1. 数据准备 定义分页相关数据状态：

   const pagination = reactive({
     currentPage: 1,
     pageSize: 10,
     totalItems: 0,
     totalPages: 0
   })
   const items = ref([]) // 存储分页数据

2. 获取分页数据 通过API获取数据时传递分页参数：

   async function fetchData() {
     const res = await api.get('/items', {
       params: {
         page: pagination.currentPage,
         size: pagination.pageSize
       }
     })
     items.value = res.data.items
     pagination.totalItems = res.data.total
     pagination.totalPages = Math.ceil(res.data.total / pagination.pageSize)
   }

3. 分页控件模板 基础分页UI实现：

   <div class="pagination">
     <button 
       @click="pagination.currentPage--" 
       :disabled="pagination.currentPage === 1">
       上一页
     </button>
   
     <span v-for="page in pageRange" 
           @click="pagination.currentPage = page"
           :class="{ active: page === pagination.currentPage }">
       {{ page }}
     </span>
   
     <button 
       @click="pagination.currentPage++" 
       :disabled="pagination.currentPage === pagination.totalPages">
       下一页
     </button>
   </div>

计算页码范围

添加计算属性生成显示的页码范围（避免过多页码显示）：

const pageRange = computed(() => {
  const range = []
  const start = Math.max(1, pagination.currentPage - 2)
  const end = Math.min(pagination.totalPages, pagination.currentPage + 2)

  for (let i = start; i <= end; i++) {
    range.push(i)
  }
  return range
})

使用现成组件库

1. Element Plus分页

   

   <el-pagination
     v-model:current-page="pagination.currentPage"
     :page-size="pagination.pageSize"
     :total="pagination.totalItems"
     @current-change="fetchData"
     layout="prev, pager, next"
   />

2. Ant Design Vue分页

   <a-pagination
     v-model:current="pagination.currentPage"
     :pageSize="pagination.pageSize"
     :total="pagination.totalItems"
     @change="fetchData"
   />

客户端分页实现

如果数据量不大可做前端分页：

const paginatedItems = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize
  const end = start + pagination.pageSize
  return allItems.value.slice(start, end)
})

关键样式示例

基础分页样式建议：

.pagination {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.pagination button {
  padding: 5px 10px;
}
.pagination span {
  padding: 5px 10px;
  cursor: pointer;
}
.pagination .active {
  background: #3498db;
  color: white;
}

注意事项

• 监听页码变化时重新获取数据：

  watch(() => pagination.currentPage, fetchData)

• 对于移动端可以考虑使用无限滚动（infinite scroll）替代传统分页

• 分页参数应与后端API约定一致（常见参数名：page/size 或 offset/limit）

• 大型数据集建议使用服务器端分页，避免性能问题