vue 前端实现伪分页
伪分页的实现方式
伪分页是指在前端对已有数据进行分页展示，无需每次切换页码时请求后端接口。适用于数据量较小且已全部加载到前端的场景。
核心逻辑
利用数组的slice方法截取当前页数据，通过计算属性动态返回分页后的数据片段。
实现步骤
数据准备与分页计算
定义总数据列表、当前页码和每页条数，通过计算属性获取当前页数据：
data() {
return {
allData: [], // 全部数据
currentPage: 1, // 当前页码
pageSize: 10 // 每页条数
};
},
computed: {
paginatedData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.allData.slice(start, end);
},
totalPages() {
return Math.ceil(this.allData.length / this.pageSize);
}
}分页控件绑定
模板中绑定分页按钮与数据展示：
<template>
<div>
<!-- 数据展示 -->
<ul>
<li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
</ul>
<!-- 分页控件 -->
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>{{ currentPage }} / {{ totalPages }}</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</template>页码切换方法
实现翻页逻辑：
methods: {
prevPage() {
if (this.currentPage > 1) this.currentPage--;
},
nextPage() {
if (this.currentPage < this.totalPages) this.currentPage++;
}
}优化建议
-
添加页码跳转
可通过输入框实现快速跳转到指定页码：jumpToPage() { const page = parseInt(this.jumpPage); if (page >= 1 && page <= this.totalPages) { this.currentPage = page; } } -
数据监听
若allData可能动态变化，需监听数据变化并重置页码：watch: { allData() { this.currentPage = 1; // 数据变化时回到第一页 } } -
性能考虑
数据量过大时（如超过10万条），伪分页可能导致内存压力，此时建议改用后端分页。
