app-grid-pagination.vue

<template>
  <row class="grid-pagination">
    <span>共&nbsp;{{ totalRow }}&nbsp;条</span>
    <i-select transfer-class-name="grid-pagination-size-popover" class="grid-pagination-size" :value="limit" :transfer="true" @on-change="handleSizeChange">
      <i-option v-for="item in pageSize" :key="item" :value="item" style="text-align: center"
        >{{ item }} 条/页</i-option
      >
    </i-select>
    <page
      class="pull-right"
      :total="totalRow"
      show-elevator
      :current="curPage"
      :page-size="limit"
      @on-change="handleChange($event)"
    >
    </page>
  </row>
</template>

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

@Component({})
export default class AppGridPagination extends Vue {
  /**
   * 总行数
   *
   * @type {number}
   * @memberof AppGridPagination
   */
  @Prop() totalRow!: number;

  /**
   * 当前页
   *
   * @type {number}
   * @memberof AppGridPagination
   */
  @Prop() curPage!: number;

  /**
   * 分页大小
   *
   * @type {number}
   * @memberof AppGridPagination
   */
  @Prop() limit!: number;

  /**
   * 分页数数组
   *
   * @type {Array<*>}
   * @memberof AppGridPagination
   */
  public pageSize = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

  /**
   * 处理当前页改变
   *
   * @type {number}
   * @memberof AppGridPagination
   */
  public handleChange($event: any) {
    this.$emit("page-change", $event);
  }

  /**
   * 处理分页大小改变
   *
   * @type {number}
   * @memberof AppGridPagination
   */
  public handleSizeChange($event: any) {
    this.$emit("page-size-change", $event);
  }
}
</script>

<style lang="scss">
@import "./app-grid-pagination.scss";
</style>