ngds/backendEle/src/components/Pagination.vue

<template>
  <div style="float: right;">
      <el-pagination
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :background="background"
          :layout="pageLayout"
          @size-change="sizeChange"
          @current-change="currentChange"
          :total="pageTotal">
      </el-pagination>
  </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: 10,
        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:10,
        pageLayout: null,
        colSpan:18
      };
    },
    created(){
      this.pageTotal = this.total;
      this.pageSizes = this.page_sizes;
      this.pageSize = this.page_size;
      this.pageLayout = this.layout;
      this.colSpan = this.span;
    },
    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;
      }
    },
    methods:{
      currentChange(currentPage){
        this.$emit('current-change', currentPage);
      },
      sizeChange(size){
        this.$emit('size-change', size);
      }
    },
    mounted(){
    }
  }
</script>

<style scoped>

</style>