page-nation
<template>
<div align="right" style="margin-top: 10px;">
<el-pagination
v-if="total>0"
:page-sizes="pageSizes"
:page-size="pageObj.pageSize"
:current-page="pageObj.pageNum"
layout="total, sizes, prev, pager, next, jumper"
background
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import constants from '~/plugins/constants'
export default {
name: 'PageNation',
props: {
total: {
type: Number,
default: 0
}
},
data () {
return {
pageSizes: constants.COMMON.pageSizes,
pageObj: {
pageNum: 1,
pageSize: constants.COMMON.defaultPageSize
}
}
},
watch: {
total (newVal, oldVal) {
const pages = newVal % this.pageObj.pageSize > 0 ? parseInt(newVal / this.pageObj.pageSize) + 1 : newVal / this.pageObj.pageSize
if (pages < this.pageObj.pageNum) {
this.pageObj.pageNum = 1
this.$emit('pageChange', this.pageObj)
}
}
},
methods: {
handleSizeChange (val) {
this.pageObj.pageSize = val
this.pageObj.pageNum = 1
this.$emit('pageChange', this.pageObj)
},
handleCurrentChange (val) {
this.pageObj.pageNum = val
this.$emit('pageChange', this.pageObj)
},
handlePage () {
this.pageObj.pageNum = 1
this.$emit('pageChange', this.pageObj)
}
}
}
</script>
<style scoped>
</style>
// 调用方法
<page-nation :total='pageObj.pageTotal' @pageChange='pageChange'></page-nation>
import pageNation from 'pageNation'
components:{ pageNation },
data(){
return {
pageObj: {
pageTotal: 0,
pageNum: 1,
pageSize: defaultSize
}
}
},
methods:{
pageChange(obj) {
this.pageObj.pageNum = obj.pageNum
this.pageObj.pageSize = obj.pageSize
}
}