vue分页实现
Vue 分页实现方法
基于 Element UI 的分页组件
Element UI 提供了现成的分页组件 el-pagination，适合快速集成到 Vue 项目中。以下是一个完整的示例：
<template>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData();
},
fetchData() {
// 调用 API 获取数据，传递 currentPage 和 pageSize 参数
console.log(`当前页码: ${this.currentPage}, 每页条数: ${this.pageSize}`);
}
}
}
</script>自定义分页组件
如果需要完全自定义分页逻辑，可以手动实现分页功能：
<template>
<div>
<ul class="pagination">
<li v-for="page in pages" :key="page">
<button @click="goToPage(page)">{{ page }}</button>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
totalItems: Number,
itemsPerPage: Number,
currentPage: Number
},
computed: {
pages() {
const pageCount = Math.ceil(this.totalItems / this.itemsPerPage);
return Array.from({ length: pageCount }, (_, i) => i + 1);
}
},
methods: {
goToPage(page) {
this.$emit('page-changed', page);
}
}
}
</script>
<style>
.pagination {
display: flex;
list-style: none;
}
.pagination li {
margin: 0 5px;
}
</style>后端分页实现
与后端 API 配合实现分页时，通常需要传递页码和每页条数参数：
async fetchPaginatedData() {
const response = await axios.get('/api/items', {
params: {
page: this.currentPage,
limit: this.pageSize
}
});
this.items = response.data.items;
this.total = response.data.total;
}分页性能优化
对于大数据量分页，可以考虑以下优化措施：
- 使用虚拟滚动技术替代传统分页
- 实现无限滚动加载更多内容
- 添加防抖处理快速翻页请求
- 缓存已加载的页面数据
// 防抖示例
debouncedFetchData: _.debounce(function() {
this.fetchData();
}, 300)以上方法可以根据项目需求选择或组合使用，Element UI 的分页组件适合大多数场景，自定义分页组件则提供了更高的灵活性。
