1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
<row class="grid-pagination">
<span>共 {{ totalRow }} 条</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>