父组件使用
<template>
<div>
<el-pagination
:total="tatal"
:pageNum.sync="params.pageNum"
:pageSize="params.pageSize"
@pagination="pagination"
/>
</div>
</template>
<script>
import ElPagination from "./ElPagination.vue";
export default {
components: {
ElPagination,
},
data() {
return {};
},
methods: {
pagination(){ }
},
};
</script>
<style scoped lang='scss'>
</style>
子组件封装
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageLimit"
:pager-count="count"
:layout="layout"
:total="total"
v-bind="$attrs"
:page-sizes="pageSizes"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name: "Pagination",
props: {
total: {
required: true,
type: Number,
},
pageNum: {
type: Number,
default: 1,
},
pageSize: {
type: Number,
default: 10,
},
count: {
type: Number,
default: 7,
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 40, 50, 100];
},
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper",
},
background: {
type: Boolean,
default: true,
},
hidden: {
type: Boolean,
default: false,
},
},
computed: {
currentPage: {
get() {
return this.pageNum;
},
set(val) {
this.$emit("update:pageNum", val);
},
},
pageLimit: {
get() {
return this.pageSize;
},
set(val) {
this.$emit("update:pageSize", val);
},
},
},
methods: {
handleSizeChange(val) {
this.$emit("pagination");
},
handleCurrentChange(val) {
this.$emit("pagination");
},
},
};
</script>
<style lang="scss">
.pagination-container {
text-align: center;
}
</style>