封装分页组件（Pagination）v2版本

使用须知：基于项目内已安装vue2+eleme-ui，则可以百分百直接套用，使用简介明了！！

一、封装component组件

component/Pagination/index.js

<template><div :class="{ hidden: hidden }" class="pagination-container"><el-pagination:background="background":current-page.sync="currentPage":page-size.sync="pageSize":layout="layout":page-sizes="pageSizes":pager-count="pagerCount":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 [10, 20, 30, 50];},},// 移动端页码按钮的数量端默认值5pagerCount: {type: Number,default: document.body.clientWidth < 992 ? 5 : 7,},layout: {type: String,default: 'total, sizes, prev, pager, next, jumper',},background: {type: Boolean,default: true,},autoScroll: {type: Boolean,default: true,},hidden: {type: Boolean,default: false,},},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) {if (this.currentPage * val > this.total) {this.currentPage = 1;}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: 32px 16px;
}
.pagination-container.hidden {display: none;
}
</style>

二、调用封装的组件

引入、注册、调用方式

// 分页参数配置

pageParam: {

currentPage: 1, // 当前页码，默认为第1页

pageSize: 10, // 每页显示的数据条数，默认为10条

total: 10, // 数据总条数，用于计算总页数

},

// 分页插件事件
callFather(parm) { }

<template><div><!-- 分页组件 --><Pagination v-bind:child-msg="pageparm" @callFather="callFather" v-bind:total="pageparm.total"></Pagination></div>
</template>
import Pagination from '@/layout/component/Pagination'; //引入
<script>
export default {name: 'demo',components: {Pagination, //注册},data() {return {pageparm: {currentPage: 1,pageSize: 10,total: 10,},};},methods(){// 分页插件事件callFather(parm) { }}
};
</script>