<template>
  <div style="margin-top: 20px; height: 50px">
    <el-pagination background
                   style="float: right; display: inline-block"
                   :total="totals"
                   layout="total, sizes, prev, pager, next, jumper"
                   @size-change="sizeChange"
                   @current-change="pageChange"
                   :current-page.sync="pageNum"
                   :page-sizes="sizesArray"
                   :page-size="size"></el-pagination>
  </div>
</template>

<script>
  export default {
    name: "TableFooter",
    data() {
      return {

      }
    },
    props: {
      totals: {
        type: Number,
        default() {
          return 0;
        },
      },
      sizesArray: {
        type: Array,
        default() {
          return [10, 20, 40, 60, 80, 100];
        },
      },
      size: {
        type: Number,
        default() {
          return 20;
        },
      },
      pageNum: {
        type: Number,
        default() {
          return 1;
        },
      }
    },
    methods: {
      sizeChange(value) {
        this.$emit('sizeChange', value);
      },
      pageChange(value) {
        this.$emit('pageChange', value);
      },
    }
  }
</script>

<style scoped>

</style>
