vue分页条怎么实现
实现Vue分页条的方法
使用Element UI的Pagination组件
安装Element UI库后，可以直接使用其分页组件。示例代码如下：
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</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获取数据
}
}
}
</script>自定义分页组件
如果需要完全自定义样式和功能，可以手动实现分页逻辑：
<template>
<div class="pagination">
<button
@click="prevPage"
:disabled="currentPage === 1">
上一页
</button>
<span
v-for="page in pageRange"
:key="page"
@click="goToPage(page)"
:class="{ active: currentPage === page }">
{{ page }}
</span>
<button
@click="nextPage"
:disabled="currentPage === totalPages">
下一页
</button>
</div>
</template>
<script>
export default {
props: {
totalItems: Number,
itemsPerPage: Number
},
data() {
return {
currentPage: 1
}
},
computed: {
totalPages() {
return Math.ceil(this.totalItems / this.itemsPerPage)
},
pageRange() {
const range = []
for (let i = 1; i <= this.totalPages; i++) {
range.push(i)
}
return range
}
},
methods: {
prevPage() {
if (this.currentPage > 1) {
this.currentPage--
this.$emit('page-changed', this.currentPage)
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++
this.$emit('page-changed', this.currentPage)
}
},
goToPage(page) {
this.currentPage = page
this.$emit('page-changed', page)
}
}
}
</script>
<style>
.pagination {
display: flex;
gap: 8px;
}
.active {
font-weight: bold;
color: blue;
}
</style>与后端API配合
实际项目中通常需要结合后端API实现分页：
methods: {
async fetchData() {
const res = await axios.get('/api/data', {
params: {
page: this.currentPage,
size: this.pageSize
}
})
this.data = res.data.items
this.total = res.data.total
}
}关键点说明
- 分页组件需要维护当前页码和每页显示数量
- 计算属性可以用于生成页码范围和总页数
- 事件处理函数应该触发数据重新获取
- 样式可以根据项目需求完全自定义
- 与后端交互时需要传递正确的分页参数
以上方法可以根据项目需求选择使用现成UI库或完全自定义实现，核心逻辑都是管理页码状态并触发数据更新。
