<template>
|
<!-- 使用Element UI的分页组件 -->
|
<el-pagination
|
class="custom-pagination"
|
background
|
:layout="layout"
|
:total="total"
|
:current-page="innerCurrentPage"
|
:page-size="innerPageSize"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</template>
|
|
<script>
|
export default {
|
name: 'Pagination',
|
props: {
|
// 总数据量（必需）
|
total: {
|
type: Number,
|
required: true,
|
default: 0
|
},
|
// 当前页码
|
currentPage: {
|
type: Number,
|
default: 1
|
},
|
// 每页显示数量
|
pageSize: {
|
type: Number,
|
default: 10
|
},
|
// 分页布局配置
|
layout: {
|
type: String,
|
default: 'total, prev, pager, next, jumper'
|
}
|
},
|
data() {
|
return {
|
// 使用内部变量来避免直接修改 props
|
innerCurrentPage: this.currentPage,
|
innerPageSize: this.pageSize
|
}
|
},
|
watch: {
|
// 监听父组件传入的页码变化
|
currentPage(newVal) {
|
if (newVal !== this.innerCurrentPage) {
|
this.innerCurrentPage = newVal;
|
}
|
},
|
// 监听父组件传入的每页数量变化
|
pageSize(newVal) {
|
if (newVal !== this.innerPageSize) {
|
this.innerPageSize = newVal;
|
}
|
}
|
},
|
methods: {
|
handleSizeChange(val) {
|
this.innerPageSize = val;
|
// 当改变每页数量时，重置到第一页
|
this.innerCurrentPage = 1;
|
// 触发统一的分页变化事件
|
this.emitPaginationChange();
|
},
|
handleCurrentChange(val) {
|
this.innerCurrentPage = val;
|
this.emitPaginationChange();
|
},
|
// 统一触发分页变化事件
|
emitPaginationChange() {
|
this.$emit('pagination-change', {
|
page: this.innerCurrentPage,
|
pageSize: this.innerPageSize
|
});
|
// 可选：单独触发更新事件
|
// this.$emit('update:current-page', this.innerCurrentPage);
|
// this.$emit('update:page-size', this.innerPageSize);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.custom-pagination {
|
margin-top: 20px;
|
padding: 15px 0;
|
text-align: right;
|
/* background: #fff;
|
border-top: 1px solid #ebeef5; */
|
}
|
/* 响应式适配 */
|
@media screen and (max-width: 768px) {
|
.custom-pagination {
|
text-align: center;
|
}
|
.custom-pagination ::v-deep .el-pagination__total,
|
.custom-pagination ::v-deep .el-pagination__jump {
|
display: none;
|
}
|
}
|
</style>
|
