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;