<template>
    <el-pagination
      background
      layout="total, prev, pager, next, sizes, jumper"
      :page-size="paginationData.pageSize"
      :page-sizes="paginationData.pageSizes"
      :pager-count="paginationData.pagerCount"
      :total="paginationData.total"
      :current-page="paginationData.currentPage"
      @current-change="paginationData.currentChange"
      @size-change="paginationData.handleSizeChange"
    ></el-pagination>
  </template>

<script>
/**
 * 分页组件
 * page-size -- 每页显示条目个数，支持 .sync 修饰符;
 * pager-count -- 页码按钮的数量，当总页数超过该值时会折叠;
 * total -- 总条目数;
 * current-page -- 当前页数，支持 .sync 修饰符;
 * current-change -- currentPage 改变时会触发;
 * size-change -- handleSizeChange 切换条数时触发;
 */
export default {
  name: "page",
  props: ["paginationData"],
  methods: {}
};
</script>

<style lang="less" scoped>
.el-pagination {
  position: absolute;
  width: 200px;
  top: 10px;
  right: 350px;

  /deep/.el-pager li:not(.disabled).active {
    background-color: #2EA8E6 ;
}

  /deep/.el-pagination__jump {
    margin-left: 0;
  }

  /deep/.btn-prev {
    border-radius: 5px;
  }

  /deep/.btn-next {
    border-radius: 5px;
  }

  /deep/ .el-pager li {
    border-radius: 5px;
    background: rgba(99, 165, 164, 0.1) ;
  }
}
</style>
