<template>
  <center style="padding: 20px 0;width: 100%;">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="page_sizes"
      :current-page="page"
      layout="total, sizes, prev, pager, next"
      :page-size="page_size"
      :total="total"
    ></el-pagination>
  </center>
</template>

<script>
  export default {
    name: 'Pagination',
    props:{
      page:{
        type:Number,
        default:1
      },
      page_size:{
        type:Number,
        default:10
      },
      total:{
        type:Number,
        default:0
      },
      page_sizes:{
        type:Array,
        default:()=>{
         return [10, 20, 50, 100]
        }
      }
    },
    data() {
      return {
        showDrawerTow:false
      };
    },
    watch: {
     showDrawer(val) {
       this.showDrawerTow=val;
     },
    },
    created() {},
    mounted() {

    },
    methods: {
        // 页面变更
        handleCurrentChange(val) {
           this.$emit('handleCurrentChange',val)
        },
        // 页面跳转
        handleSizeChange(val) {
          this.$emit('handleSizeChange',val)
        },
    }
  };

</script>

<style>

</style>
