vue实现假分页
实现假分页的基本思路
假分页（前端分页）指在一次性获取所有数据后，通过前端逻辑对数据进行分页展示。相比真分页（后端分页），假分页减少了与后端的交互次数，但可能带来性能问题（数据量过大时）。
核心实现步骤
数据准备 定义总数据数组和分页相关变量：
data() {
return {
allData: [], // 全部数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
paginatedData: [] // 当前页数据
}
}分页逻辑 通过计算属性实现分页切片：
computed: {
totalPages() {
return Math.ceil(this.allData.length / this.pageSize)
},
displayedData() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.allData.slice(start, end)
}
}页面控制方法 添加翻页方法：
methods: {
goToPage(page) {
if (page >= 1 && page <= this.totalPages) {
this.currentPage = page
}
}
}完整组件示例
<template>
<div>
<table>
<tr v-for="item in displayedData" :key="item.id">
<td>{{ item.name }}</td>
</tr>
</table>
<div class="pagination">
<button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
<span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
<button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
allData: Array.from({length: 100}, (_, i) => ({ id: i, name: `项目 ${i}` })),
currentPage: 1,
pageSize: 10
}
},
computed: {
totalPages() {
return Math.ceil(this.allData.length / this.pageSize)
},
displayedData() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.allData.slice(start, end)
}
},
methods: {
goToPage(page) {
if (page >= 1 && page <= this.totalPages) {
this.currentPage = page
}
}
}
}
</script>性能优化建议
对于大数据量场景（如超过1000条记录），建议：
- 添加虚拟滚动技术（如使用vue-virtual-scroller）
- 实现懒加载分批获取数据
- 添加分页尺寸选择器
- 考虑改用后端分页
扩展功能实现
添加分页尺寸选择
data() {
return {
pageSizeOptions: [5, 10, 20, 50]
}
}模板中添加：
<select v-model="pageSize" @change="currentPage = 1">
<option v-for="size in pageSizeOptions" :value="size">{{ size }}条/页</option>
</select>添加页码快捷跳转
<input
type="number"
v-model.number="jumpPage"
@keyup.enter="goToPage(jumpPage)"
min="1"
:max="totalPages"
>假分页实现简单高效，适合中小型数据集场景，但需注意性能边界。
