技術標籤：vue

<template>
     <el-row>
        <el-col align="left">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginationOptions.currentPage"
 

            :page-sizes="[10,30,50,100]"
            :page-size="10" 
            prev-text="上一頁"
            next-text="下一頁"
            layout="->,prev, pager, next, jumper "
            :total="total">
            </el-pagination>
        <
 
/el-col>
    </el-row>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class PaginationPanel extends Vue {
  @Prop({
    default: 0
  })
  public total: number;
  
  @Prop({
    default
 
: false
  })
  public reset: boolean;
  public paginationOptions= {
    skip: 0,
    count: 10,
    currentPage: 1
  };
    /* 重置當前頁 */
  @Watch("reset")
  public reloadChange(val: boolean) {
      if(val){
        this.paginationOptions.currentPage=1;
        //  console.log('val',val)
      }
  }

  public handleCurrentChange(val) {
    this.paginationOptions.currentPage=val;
    this.paginationOptions.skip=(this.paginationOptions.currentPage-1)*this.paginationOptions.count;
    this.$emit('onPaginationChange', this.paginationOptions)
  }
  public handleSizeChange(val) {
     this.paginationOptions.count=val;
     if(Math.ceil(this.total/val)<this.paginationOptions.currentPage){
       this.paginationOptions.skip=0;
       }else{
        this.paginationOptions.skip=(this.paginationOptions.currentPage-1)*this.paginationOptions.count;
        this.$emit('onPaginationChange', this.paginationOptions)
     }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
}
</style>