70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<template>
|
|
<div v-if="shouldShow" class="empty-pagination avue-crud__pagination">
|
|
<el-pagination
|
|
background
|
|
:current-page="page.currentPage"
|
|
:page-size="pageSize"
|
|
:page-sizes="pageSizes"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'EmptyPagination',
|
|
props: {
|
|
page: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
alwaysShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
emits: ['size-change', 'current-change', 'load'],
|
|
computed: {
|
|
shouldShow() {
|
|
return this.alwaysShow || this.isEmptyTotal;
|
|
},
|
|
isEmptyTotal() {
|
|
return Number(this.page.total || 0) === 0;
|
|
},
|
|
pageSize() {
|
|
return this.page.pageSize || 10;
|
|
},
|
|
pageSizes() {
|
|
return this.page.pageSizes || [10, 20, 50, 100];
|
|
},
|
|
total() {
|
|
return Number(this.page.total || 0);
|
|
},
|
|
},
|
|
methods: {
|
|
handleSizeChange(pageSize) {
|
|
this.page.currentPage = 1;
|
|
this.page.pageSize = pageSize;
|
|
this.$emit('size-change', pageSize);
|
|
this.$emit('load');
|
|
},
|
|
handleCurrentChange(currentPage) {
|
|
this.page.currentPage = currentPage;
|
|
this.$emit('current-change', currentPage);
|
|
this.$emit('load');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.empty-pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
background: #fff;
|
|
}
|
|
</style>
|