nuxt+ant Design 分页封装

<template>
  <div class="pagination">
    <a-pagination
      v-model="current"
      :total="total"
      :defaultPageSize="defaultPageSize"
      @change="onShowSizeChange"
      @showSizeChange="showSizeChange"
      show-size-changer
      show-quick-jumper
      :pageSizeOptions="pageSizes"
    />
    <span>{{ `共${total}条数据` }}</span>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator'
// 分页
@Component({})
export default class extends Vue {
  private current: number = 1

  @Prop()
  pageSizes: any
  @Prop()
  total: any
  @Prop()
  defaultPageSize: any
  @Prop()
  currentPage: any

  @Watch('currentPage')
  changeCurrentPage(val: number) {
    this.current = val
  }
  mounted() {
    this.current = this.currentPage
  }
  private showSizeChange(current: number, pageSize: number) {
    //pageSize 变化的回调
    this.current = 1
    this.$emit('onShowSizeChange', { current: 1, pageSize: pageSize })
  }
  private onShowSizeChange(current: number, pageSize: number) {
    //页码的回调
    // this.current = current
    this.$emit('onShowSizeChange', { current: current, pageSize: pageSize })
  }
}
</script>

组件调用

 <Pagination
      :pageSizes="['10', '30', '50', '100']"
      :total="paging.total"
      :defaultPageSize="30"
      :currentPage="paging.current"
      @onShowSizeChange="onShowSizeChange" //分页改变时触发
    ></Pagination>