<template> <row class="grid-pagination"> <dropdown class="grid-pagination__dropdown" @on-click="handleSizeChange"> Show <span>{{ limit }}</span> <icon type="ios-arrow-down"></icon> <template #list> <dropdownMenu> <dropdownItem v-for="(value, index) in pageSize" :key="index" :name="value">{{ value }} 条/页</dropdownItem> </dropdownMenu> </template> </dropdown> <div class="grid-page-pre-pro"> <i class="el-icon-download"></i> </div> <page class="pull-right" :transfer="true" :total="totalRow" simple size="small" :current="curPage" :page-size="limit" @on-change="handleChange($event)" > </page> <div class="grid-page-next-pro"> <i class="el-icon-download"></i> </div> </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>