对element-ui的分页进行二次封装成组件

因为我的项目风格要统一，所以对el-pagination中的样式做修改

<template>
    <div class="pagea">
        <el-pagination
            layout="prev, pager, next"
            background
            :total="pager[props.total]"
            :current-page.sync="pager[props.page]"
            :page-size="pager[props.rows]"
            @size-change="onChangeSize"
            @current-change="onChangePage">
        </el-pagination>
    </div>
</template>
<script>
export default {
    name:'Pagination',
    props: {
        pager: {
            type: Object,
            required: true,
            },
        refresh: {
            type: Boolean,
            },
        props: {
            type: Object,
            required: false,
            default: () => ({
                page: 'page',   // 第几页
                rows: 'rows',   // 显示条数
                total: 'count', // 总记录条数
            }),
        },
  },
  computed: {
    total() {
      return this.pager[this.props.total] || 0;
    },
    // 检测获取到的数据是否为空
    isEmptyList() {
      return Math.ceil(this.pager[this.props.total] / this.pager[this.props.rows]) < this.pager[this.props.page];
    },
  },
  watch: {
    total() {
      // 存在记录但未获取到数据时, 重新请求
      if (this.pager[this.props.page] > 1 && this.isEmptyList) {
        this.$emit('setPager', Object.assign(this.pager, {
          [this.props.page]: this.pager[this.props.page] - 1,
        }));
        this.$emit('query');
      }
    },
  },
  methods: {
    // 每页条数
    onChangeSize(rows) {
      const temp = {
        [this.props.rows]: rows,
        // 当显示条数小于或等于总条数时，重置页数
        [this.props.page]: rows <= this.total ? 1 : this.pager[this.props.page],
      };

      this.$emit('setPager', Object.assign(this.pager, temp));
      // 触发父组件查询请求
      this.$emit('query');
    },
    // 翻页
    onChangePage(page) {
      this.$emit('setPager', Object.assign(this.pager, { [this.props.page]: page }));
      this.$emit('query');
    },
  },

}
</script>
<style scoped>
.pagea{
    width: 100%;
    margin: auto;
    text-align: center;
}
.pagea /deep/ .btn-prev,.pagea /deep/ .btn-next{
    background: #0A4AA1;
    color: #ffffff;
    width: 96px;
    height: 48px;
    font-size: 20px;
}
.pagea /deep/ .number{
    width: 48px;
    height: 48px;
    line-height: 48px;
    border: 1px solid #0A4AA1;
    border-radius: 4px;
    font-size: 20px;
}
.pagea /deep/ .el-pager li {
    width: 48px;
    height: 48px;
    line-height: 48px;
    color: #0A4AA1;
    font-size: 20px;
}
.pagea /deep/ .number:hover{
    color: #0A4AA1;
}
.pagea /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #0A4AA1;
    color: #FFF;
}
.pagea /deep/ .el-pagination button span{
    font-size: 18px !important;
}
.pagea /deep/ .el-pagination {
    text-align: center;
}
</style>

在用的地方进行组件引入并使用，一下就不需要写全啦。。。就是一些基本的东西，自己处理吧

<Pagination v-else-if="this.pager.count/this.pager.rows > 1" :pager="pager" @setPager="getList"></Pagination>

在data中进行定义，@setPager里是获取的数据函数

pager: {
     count: 0,
        page: 1,
        rows: 12,
 },