超好用的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函数需要在页面刚加载的时候就调用一下、页面按搜索按钮的时候也要调用一下，再就是用户点击下一页的时候调用。