99 lines
2.5 KiB
Vue
99 lines
2.5 KiB
Vue
<template>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
background
|
|
:layout="paginationLayout"
|
|
:current-page="pageParams.pageNo"
|
|
:page-size="pageParams.pageSize"
|
|
:page-sizes="pageSizes"
|
|
:total="pageTotal"
|
|
:pager-count="pagerCount"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handlePageChange"
|
|
></el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
pageParams: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
pageSizes: {
|
|
type: Array,
|
|
default: function () {
|
|
return [5, 10, 20, 30, 40, 50, 100];
|
|
}
|
|
},
|
|
// pagerCount: {
|
|
// type: Number,
|
|
// default: 5
|
|
// },
|
|
pageTotal: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
ifShowTotal: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
ifShowSizes: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
ifShowPrev: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
ifShowPager: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
ifShowNext: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
ifShowJumper: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
pagerCount: 5
|
|
};
|
|
},
|
|
methods: {
|
|
handleSizeChange(val) {
|
|
this.$emit('handleSizeChange', val);
|
|
},
|
|
handlePageChange(val) {
|
|
this.$emit('handlePageChange', val);
|
|
},
|
|
handleResize() {
|
|
if (window.innerWidth > 768) {
|
|
this.pagerCount = 5;
|
|
} else {
|
|
this.pagerCount = 2;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.handleResize(); // 初始化宽度
|
|
},
|
|
computed: {
|
|
paginationLayout() {
|
|
const layoutStr = ['total', 'sizes', 'prev', 'pager', 'next', 'jumper'];
|
|
const { ifShowTotal, ifShowSizes, ifShowPrev, ifShowPager, ifShowNext, ifShowJumper } = this;
|
|
let layoutWantedToBeShowed = [];
|
|
[ifShowTotal, ifShowSizes, ifShowPrev, ifShowPager, ifShowNext, ifShowJumper].forEach((item, index) => {
|
|
if (item) layoutWantedToBeShowed.push(index);
|
|
});
|
|
return layoutWantedToBeShowed.map((item) => layoutStr[item]).join(',');
|
|
}
|
|
}
|
|
};
|
|
</script>
|