<template>
  <div class="change_page">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      layout="total, prev, pager, next, sizes" :current-page="page.pageNum" :page-size="page.pageSize" background
      :total="page.total" :page-sizes="pageSizes">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    name: "ChangePage",
    props: {
      pageSizes: {
        type: Array,
        default: () => [10, 30, 50],
      },
      page: {
        type: Object,
        default: () => {},
      },
    },
    computed: {},
    methods: {
      handleSizeChange(nowsize) {
        this.$emit("handleSizeChange", nowsize);
      },
      handleCurrentChange(nowpage) {
        this.$emit("handleCurrentChange", nowpage);
      },
    },
    created() {},
  };

</script>
<style lang="scss" scoped>
  .change_page {
    display: flex;
  }

  .el-pagination {
    width: 100%;
    text-align: right;
  }

</style>
