vue手动实现分页表格
手动实现分页表格的方法
数据分页处理
通过计算总页数和当前页数据范围实现分页。假设原始数据为tableData，每页显示pageSize条数据：
computed: {
totalPages() {
return Math.ceil(this.tableData.length / this.pageSize);
},
currentPageData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.tableData.slice(start, end);
}
}分页控件实现
创建分页按钮组件，绑定页码切换事件：
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span v-for="page in totalPages" :key="page">
<button @click="currentPage = page">{{ page }}</button>
</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>表格渲染
使用计算属性currentPageData渲染当前页数据：
<table>
<tr v-for="item in currentPageData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</table>状态管理
在data中定义分页相关变量：
data() {
return {
tableData: [], // 原始数据
currentPage: 1,
pageSize: 10
}
}样式优化
为分页按钮添加CSS样式增强交互：
.pagination button {
margin: 0 5px;
padding: 5px 10px;
}
.pagination button:disabled {
opacity: 0.5;
}
