ngds-backend-ele/src/components/Pagination/index.vue

<template>
  <div style="float: right;">
    <el-pagination
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :background="background"
      :layout="pageLayout"
      :total="pageTotal"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      default: 0,
      type: Number
    },
    page_sizes: {
      default: function() {
        return [1, 2, 5, 10, 20]
      },
      type: Array
    },
    page_size: {
      default: 20,
      type: Number
    },
    layout: {
      default: 'total, sizes, prev, pager, next, jumper',
      type: String
    },
    page: {
      default: 1,
      type: Number
    },
    background: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      pageTotal: 1,
      pageSizes: null,
      pageSize: 20,
      pageLayout: null,
      colSpan: 18
    }
  },
  watch: {
    total() {
      this.pageTotal = this.total
    },
    page_sizes() {
      this.pageSizes = this.page_sizes
    },
    page_size() {
      this.pageSize = this.page_size
    },
    layout() {
      this.pageLayout = this.layout
    },
    span() {
      this.colSpan = this.span
    }
  },
  created() {
    this.pageTotal = this.total
    this.pageSizes = this.page_sizes
    this.pageSize = this.page_size
    this.pageLayout = this.layout
    this.colSpan = this.span
  },
  mounted() {
  },
  methods: {
    currentChange(currentPage) {
      this.$emit('current-change', currentPage)
    },
    sizeChange(size) {
      this.$emit('size-change', size)
    }
  }
}
</script>

<style scoped>

</style>