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
import { computed, defineComponent } from 'vue';
import { useNamespace } from '@ibiz-template/vue-util';
import '@ibiz-template/theme/style/components/common/app-grid-pagination/app-grid-pagination.scss';
export const AppGridPagination = defineComponent({
name: 'AppGridPagination',
props: {
total: {
type: Number,
required: true,
},
curPage: {
type: Number,
required: true,
},
size: {
type: Number,
required: true,
},
},
setup(props) {
const ns = useNamespace('grid-page');
const start = computed(() => {
return (props.curPage - 1) * props.size + 1;
});
const end = computed(() => {
return props.curPage * props.size;
});
return { ns, start, end };
},
methods: {
onPageChange(page: number) {
this.$emit('change', page);
},
onPageSizeChange(size: number) {
this.$emit('page-size-change', size);
},
pageReset() {
this.$emit('page-reset');
},
},
render() {
return (
<div class={this.ns.b()}>
<i-page
transfer={true}
total={this.total}
show-sizer
show-elevator
current={this.curPage}
page-size={this.size}
page-size-opts={[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
show-total
on-on-change={this.onPageChange}
on-on-page-size-change={this.onPageSizeChange}
>
<span class={this.ns.b('btn')}>
<i-button
icon='md-refresh'
title='刷新'
on-click={this.pageReset}
></i-button>
</span>
<span>
显示 {this.start} - {this.end} 条,共
{this.total}
条数据
</span>
</i-page>
</div>
);
},
});
export default AppGridPagination;