vue实现表格页面分页
实现表格分页的基本思路
在Vue中实现表格分页通常需要结合前端分页逻辑和后端API支持。前端分页适用于数据量较小的情况，直接截取数组展示；后端分页则需要通过API接口按需请求数据。
前端分页实现方法
创建计算属性处理分页数据：
computed: {
paginatedData() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.tableData.slice(start, end)
}
}配置分页参数：
data() {
return {
currentPage: 1,
pageSize: 10,
tableData: [] // 原始数据
}
}模板中使用分页控件：
<el-table :data="paginatedData">
<!-- 表格列定义 -->
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>后端分页实现方法
请求数据时携带分页参数：
methods: {
fetchData() {
const params = {
page: this.currentPage,
size: this.pageSize
}
api.getTableData(params).then(res => {
this.tableData = res.data.list
this.total = res.data.total
})
}
}分页事件处理方法：
methods: {
handleSizeChange(val) {
this.pageSize = val
this.fetchData()
},
handleCurrentChange(val) {
this.currentPage = val
this.fetchData()
}
}使用第三方组件库
Element UI分页组件示例：
<template>
<div>
<el-table :data="tableData">
<!-- 表格内容 -->
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</template>Ant Design Vue分页组件示例：
<a-table
:columns="columns"
:data-source="data"
:pagination="{ pageSize: 10 }"
/>自定义分页组件实现
创建可复用的分页组件：
// Pagination.vue
props: {
total: Number,
current: Number,
pageSize: Number
},
methods: {
changePage(page) {
this.$emit('change', page)
}
}在父组件中使用：
<custom-pagination
:total="total"
:current="currentPage"
:page-size="pageSize"
@change="handlePageChange"
/>性能优化建议
大数据量时采用虚拟滚动代替分页 缓存已请求的分页数据减少重复请求 添加加载状态提升用户体验 分页器显示总数和页码跳转功能
常见问题处理
页码超出范围时重置到第一页 数据为空时显示友好提示 分页参数与筛选条件联动 URL中保持分页状态便于分享链接
