用vue实现分页
使用Vue实现分页功能
分页是Web应用中常见的功能，可以通过Vue结合计算属性和事件处理实现。以下是实现分页的核心步骤：
数据准备 定义数据模型，包括当前页码、每页显示数量和总数据列表：
data() {
return {
currentPage: 1,
itemsPerPage: 10,
allItems: [...], // 你的完整数据数组
}
}计算当前页数据 使用计算属性筛选当前页显示的数据：
computed: {
paginatedItems() {
const start = (this.currentPage - 1) * this.itemsPerPage
const end = start + this.itemsPerPage
return this.allItems.slice(start, end)
},
totalPages() {
return Math.ceil(this.allItems.length / this.itemsPerPage)
}
}分页控件模板 在模板中添加分页导航按钮：
<div class="pagination">
<button
@click="currentPage--"
:disabled="currentPage === 1">
上一页
</button>
<span v-for="page in totalPages"
:key="page"
@click="currentPage = page"
:class="{ active: currentPage === page }">
{{ page }}
</span>
<button
@click="currentPage++"
:disabled="currentPage === totalPages">
下一页
</button>
</div>样式优化 添加基础样式提升用户体验：
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button, .pagination span {
margin: 0 5px;
padding: 5px 10px;
cursor: pointer;
}
.pagination span.active {
font-weight: bold;
color: #42b983;
}
.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}高级分页实现方案
动态页码显示 当页码较多时，可以优化显示范围：
computed: {
displayedPages() {
const range = 2 // 显示前后范围
let start = Math.max(1, this.currentPage - range)
let end = Math.min(this.totalPages, this.currentPage + range)
if (this.currentPage - range <= 1) {
end = Math.min(1 + range * 2, this.totalPages)
}
if (this.currentPage + range >= this.totalPages) {
start = Math.max(this.totalPages - range * 2, 1)
}
return Array.from({length: end - start + 1}, (_, i) => start + i)
}
}使用分页组件 封装为可复用组件：
// Pagination.vue
<template>
<div class="pagination">
<!-- 分页结构 -->
</div>
</template>
<script>
export default {
props: {
current: { type: Number, default: 1 },
total: { type: Number, required: true },
perPage: { type: Number, default: 10 }
},
computed: {
totalPages() {
return Math.ceil(this.total / this.perPage)
}
},
methods: {
changePage(page) {
this.$emit('page-changed', page)
}
}
}
</script>使用第三方库
考虑使用成熟的分页库如vuejs-paginate：
npm install vuejs-paginateimport Paginate from 'vuejs-paginate'
export default {
components: { Paginate },
methods: {
handlePageClick(page) {
this.currentPage = page
}
}
}<paginate
:page-count="totalPages"
:click-handler="handlePageClick"
:prev-text="'<'"
:next-text="'>'"
:container-class="'pagination'"
:page-class="'page-item'">
</paginate>服务端分页实现
当数据量很大时，建议采用服务端分页：
API请求参数
methods: {
fetchData(page) {
axios.get(`/api/items?page=${page}&limit=${this.itemsPerPage}`)
.then(response => {
this.paginatedItems = response.data.items
this.totalItems = response.data.total
})
}
}分页信息计算
computed: {
totalPages() {
return Math.ceil(this.totalItems / this.itemsPerPage)
}
}初始化加载
created() {
this.fetchData(1)
}通过以上方法可以实现完整的Vue分页功能，根据项目需求选择客户端或服务端分页方案。
