update: 增加表格分页组件

src/app-register.ts

@@ -138,6 +138,7 @@ import AppCtrlPos from './components/layout-element/structure/app-ctrl-pos/app-c
 import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
 import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue';
 import AppTodoList from './components/app-todo-list/app-todo-list.vue';
+import AppGridPagination from './components/app-grid-pagination/app-grid-pagination.vue';
 import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
 // 布局组件
 import AppIndexViewLayoutLeft from './layout/index-view-layout-left/index-view-layout-left.vue';
@@ -304,6 +305,7 @@ export const AppComponents = {
         v.component('app-preset-button',AppPresetButton);
         v.component('app-field-image-dynamic', AppFieldImageDynamic);
         v.component('app-todo-list',AppTodoList);
+        v.component('app-grid-pagination',AppGridPagination);
         v.component('extend-action-timeline',ExtendActionTimeline);
         v.component('app-pickup-view-layout',AppPickUpViewLayout);
     },

src/components/app-grid-pagination/app-grid-pagination.scss

+.grid-pagination  {
+    height: 44px;
+    padding: 0 80px 0 20px;
+    background-color: var(--app-color-white);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 15px;
+    color: var(--app-color-gray-100);
+    border-top: 1px solid var(--app-color-gray-400);
+    .ivu-page {
+        height: 25px;
+        display: flex;
+    }
+    .ivu-page-simple-pager {
+        pointer-events: none;
+        cursor: pointer;
+        input {
+            border: 0;
+        }
+    }
+    .grid-page-pre-pro {
+        transform: rotate(90deg);
+    }
+    .grid-page-next-pro {
+        transform: rotate(-90deg);
+    }
+    .grid-page-pre-pro,.grid-page-next-pro {
+        font-size: 24px;
+        margin-top: -2px;
+    }
+    .ivu-icon {
+        font-size: 24px;
+        color: var(--app-color-gray-100);
+    }
+    .grid-pagination__dropdown {
+        span {
+            color: var(--app-color-black);
+            font-weight: 600;
+        }
+        .ivu-icon {
+            margin-left: 15px;
+        }
+    }
+}
\ No newline at end of file

src/components/app-grid-pagination/app-grid-pagination.vue

+<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>