超好用的element的el-pagination分页组件二次封装-附源码及讲解
前言：在很多后台管理系统开发时总会有很多分页组件的使用，如果我们每次都用elementui官网的el-pagination去写的话，调整所有分页的样式就会很麻烦，而且页面内容也会很累赘繁琐。
讲解一个我经常使用的二次封装el-pagination组件，该组件非常方便快捷。所有例子都是使用vue2+elementUI，如要使用vue3稍作修改即可，也可评论问我
效果展示：
一、先上组件代码：
<template><div:class="{'hidden':hidden}"class="pagination-container"><el-pagination:small="size":background="background":current-page.sync="currentPage":page-size.sync="pageSize":layout="layout":page-count="pageCount":page-sizes="pageSizes":total="total"v-bind="$attrs"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><script>
// import { scrollTo } from '@/utils/scroll-to'export default {name: 'Pagination',props: {size: {type: Boolean,default: false},total: {type: Number},pageCount: {type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [10, 20, 30, 50]}},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}},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) {this.currentPage = 1this.$emit('pagination', { page: this.currentPage, limit: val })// if (this.autoScroll) {// scrollTo(0, 800)// }},handleCurrentChange(val) {this.$emit('pagination', { page: val, limit: this.pageSize })// if (this.autoScroll) {// scrollTo(0, 800)// }}}
}
</script><style scoped>
.pagination-container {/* background: #fff; */padding: 32px 16px;
}
.pagination-container.hidden {display: none;
}
</style>
二、使用该组件
1、引入注册该组件
import Pagination from "@/components/Pagination";
2、在需要的html上使用
（我一般都是搭配el-table去使用的，表格组件封装请看我的另一篇帖子）
<Paginationv-show="total > 0":total="total":page.sync="listQuery.page":limit.sync="listQuery.limit"@pagination="listQueryFn"/>三、解释参数
1、total是总条目数
一般来说后端传过来的表格数据要顺带着传给前端一个总数，直接赋值给total就行
2、listQuery对象
listQuery: {page: 1,limit: 10,},page：当前是第几页 limit：当前页展示多少条
一般默认都是第一页，十条，这个listQuery就是要传给后端去获取表格数据的
3、listQueryFn
listQueryFn是放前端请求接口的函数，我这里红框只是个示意，用的时候写成自己的接口就行
一般来说listQueryFn函数需要在页面刚加载的时候就调用一下、页面按搜索按钮的时候也要调用一下，再就是用户点击下一页的时候调用。
