用vue怎样实现分页
使用Vue实现分页功能
分页功能通常需要结合后端API返回的数据和前端UI组件实现。以下是基于Vue 3的常见实现方式（Vue 2类似，部分语法需调整）：
基础分页逻辑实现
-
数据准备 定义分页相关数据状态：
const pagination = reactive({ currentPage: 1, pageSize: 10, totalItems: 0, totalPages: 0 }) const items = ref([]) // 存储分页数据 -
获取分页数据 通过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) } -
分页控件模板 基础分页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
})使用现成组件库
-
Element Plus分页
<el-pagination v-model:current-page="pagination.currentPage" :page-size="pagination.pageSize" :total="pagination.totalItems" @current-change="fetchData" layout="prev, pager, next" /> -
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）
-
大型数据集建议使用服务器端分页，避免性能问题
