<template>
<div class="pagination-container">
<el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 20
},
pageSizes: {
type: Array,
default () {
return [this.limit, 50, 100, 300, 500, 700, 1000]
}
},
layout: {
type: String,
default () {
return 'total, prev, pager,next, jumper'
}
}
},
data () {
return {
}
},
computed: {
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) {
console.log(val)
console.log(this.currentPage)
this.$emit('pagination', { page: this.currentPage, limit: val })
},
handleCurrentChange (val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
}
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 20px 0 10px;text-align: right;
}
</style>
<pagination v-show="totalPage>0" :total="totalPage" :page.sync="limit.page" :limit.sync="limit.pageSize" :layout="layout" @pagination="getTableData" />
totalPage: 0,
limit:{
page:1,
pageSize:10
},
tableData: [],
layout: 'total, prev, pager,next, sizes, jumper',