<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script>
import {
scrollTo
} from '@/utils/scroll-to';
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 20
},
layout: {
type: String,
default: ' prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
},
leftTotalText: {
type: Boolean,
default: false
}
},
computed: {
currentPages() {
return this.total / 20;
},
currentPage: {
get() {
return this.page;
},
set(val) {
this.$emit('update:page', val);
}
},
pageSize: {
get() {
return this.limit;
},
set(val) {
this.$emit('update:limit', val);
}
}
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', {
page: this.currentPage,
limit: val
});
if (this.autoScroll) {
scrollTo(0, 800);
}
},
handleCurrentChange(val) {
this.$emit('pagination', {
page: val,
limit: this.pageSize
});
if (this.autoScroll) {
scrollTo(0, 800);
}
}
}
};
</script>
<style lang="scss" scoped>
.pagination-container {
background: #fff;
position: relative;
width: 100%;
margin-top: 10px;
}
.pagination-container.hidden {
display: none;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background: #1856ed;
}
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .el-pager li {
height: 32px;
line-height: 32px;
background: #fff;
border: 1px solid #e8ebf1;
font-size: 14px;
}
.pagination_total {
position: absolute;
top: 40%;
left: 20px;
}
.pagination_total {
color: #929292;
}
</style>