vue前端分页怎么实现
Vue前端分页实现方法
基于计算属性实现分页
通过计算属性对数据进行切片处理，结合页码和每页条数动态计算当前页数据：
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)
}
}使用Element UI分页组件
集成Element UI的Pagination组件快速实现分页功能：
<template>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next">
</el-pagination>
</template>
<script>
export default {
methods: {
handlePageChange(val) {
this.currentPage = val
this.fetchData()
}
}
}
</script>自定义分页组件实现
创建可复用的分页组件，通过props接收配置参数：
// Pagination.vue
props: {
total: Number,
current: Number,
pageSize: Number
},
methods: {
changePage(page) {
this.$emit('page-change', page)
}
}服务端分页结合
当数据量较大时，建议采用服务端分页，前端只传递分页参数：
async fetchData() {
const params = {
page: this.currentPage,
size: this.pageSize
}
const res = await api.getList(params)
this.listData = res.data.items
this.total = res.data.total
}分页状态管理
使用Vuex管理分页状态，保持多组件间同步：
// store.js
state: {
pagination: {
currentPage: 1,
pageSize: 10
}
},
mutations: {
SET_PAGE(state, page) {
state.pagination.currentPage = page
}
}性能优化技巧
对于大型数据集，采用虚拟滚动代替传统分页：
import { RecycleScroller } from 'vue-virtual-scroller'
components: {
RecycleScroller
}每种实现方式应根据具体业务场景选择，前端分页适合数据量小的场景，服务端分页适合大数据量情况。实际开发中可结合防抖、缓存等策略优化用户体验。
