<template>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:page-sizes="pageSizesArr"
:total="total"
:current-page="currentPage"
:page-size="pageSize"
:layout="layout"
></el-pagination>
</div>
</template>
<script>
export default {
name: "Pagination",
props: {
// 总页数
total: {
type: Number,
default: 0,
},
// 当前页
currentPage: {
type: Number,
default: 1,
},
// 每页显示条数
pageSize: {
type: Number,
default: 10,
},
pageSizesArr: {
type: Array,
default() {
return [10, 20, 30, 50];
},
},
layout: {
type: String,
default: "->,total, sizes, prev, pager, next, jumper",
},
},
data() {
return {
page: {
_pageSize: this.pageSize,
_currentPage: this.currentPage,
},
};
},
methods: {
// 切换分页
handleSizeChange(val) {
if (this.currentPage * val > this.total) {
this.page._currentPage = 1;
}
this.page._pageSize = val;
this.$emit("pagination", this.page);
},
// 切换页码
handleCurrentChange(val) {
this.page._currentPage = val;
this.$emit("pagination", this.page);
},
},
};
</script>
<style scoped lang="scss">
.pagination {
margin: 20px 0;
}
</style>
二次封装el-分页
于 2023-09-18 13:35:27 首次发布