vue实现表格分页
实现表格分页的基本思路
在Vue中实现表格分页通常需要结合以下核心功能：数据分片（根据页码和每页条数截取数据）、分页器组件（控制页码跳转）、表格渲染（展示当前页数据）。以下是具体实现方法。
准备分页数据
定义总数据数组和分页相关变量：
data() {
return {
allData: [], // 从API获取的完整数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示条数
paginatedData: [] // 当前页数据
}
}计算分页数据
使用计算属性动态获取当前页数据：
computed: {
totalPages() {
return Math.ceil(this.allData.length / this.pageSize);
},
currentPageData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.allData.slice(start, end);
}
}渲染表格和分页器
模板部分示例：
<template>
<div>
<!-- 表格渲染 -->
<table>
<tr v-for="item in currentPageData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</table>
<!-- 分页控件 -->
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
<button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
</div>
</div>
</template>分页控制方法
实现页码切换逻辑：
methods: {
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
},
goToPage(page) {
if (page >= 1 && page <= this.totalPages) {
this.currentPage = page;
}
}
}使用Element UI分页组件（可选）
如果使用Element UI，可简化分页实现：
<el-table :data="currentPageData">
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:total="allData.length">
</el-pagination>对应方法：
handleCurrentChange(val) {
this.currentPage = val;
}关键注意事项
- 异步数据需在API请求完成后更新
allData - 大型数据集建议后端分页（传递page/pageSize参数）
- 可添加每页条数选择器动态调整
pageSize - 分页样式可通过CSS自定义或使用UI库预设样式
通过以上步骤即可实现基础分页功能，实际项目中可根据需求扩展页码快速跳转、每页条数切换等功能。
