超好用的element的el-pagination分页组件二次封装-附源码及讲解

前言：在很多后台管理系统开发时总会有很多分页组件的使用，如果我们每次都用elementui官网的el-pagination去写的话，调整所有分页的样式就会很麻烦，而且页面内容也会很累赘繁琐。

讲解一个我经常使用的二次封装el-pagination组件，该组件非常方便快捷。所有例子都是使用vue2+elementUI，如要使用vue3稍作修改即可，也可评论问我

效果展示：

一、先上组件代码：

html 复制代码

<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 = 1
      this.$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、引入注册该组件

javascript 复制代码

import Pagination from "@/components/Pagination";

2、在需要的html上使用

（我一般都是搭配el-table去使用的，表格组件封装请看我的另一篇帖子）

html 复制代码

      <Pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="listQueryFn"
      />

三、解释参数

1、total是总条目数

一般来说后端传过来的表格数据要顺带着传给前端一个总数，直接赋值给total就行

2、listQuery对象

javascript 复制代码

      listQuery: {
        page: 1,
        limit: 10,
      },

page：当前是第几页 limit：当前页展示多少条

一般默认都是第一页，十条，这个listQuery就是要传给后端去获取表格数据的

3、listQueryFn

listQueryFn是放前端请求接口的函数，我这里红框只是个示意，用的时候写成自己的接口就行

一般来说listQueryFn函数需要在页面刚加载的时候就调用一下、页面按搜索按钮的时候也要调用一下，再就是用户点击下一页的时候调用。