子组件:
<template>
<div class="tablePage">
<!-- hide-on-single-page="true" 只有1页的时候分页是否隐藏 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(page)"
:pager-count="9"
:hide-on-single-page="true"
:page-sizes="[15, 25, 35, 45]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
props: ['page', 'pageSize', 'total'],
methods: {
// 当每页的条数发生变化时触发
handleSizeChange (size) {
this.$emit('pageSizeChange', size)
},
// 分页触发
handleCurrentChange (current) {
this.$emit('currentChange', current)
}
}
}
</script>
父组件调用:
<template>
<Pagination
:page="page"
:pageSize="pageSize"
:total="total"
@currentChange="currentChange($event)"
@pageSizeChange="pageSizeChange($event)">
</Pagination>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
components: {
Pagination
},
data () {
return {
page: 1,
pageSize: 15,
total: 29
}
},
methods:{
currentChange(event) {
this.page = event
// 调用接口XXX
},
pageSizeChange(event) {
this.pageSize = event
// 调用接口XXX
}
}
}
</script>