update: 表格分页

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;
+.grid-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 39px 62px 25px 0;
+  color: var(--ey-color-gray-100);
+  // 选择分页大小
+  .grid-pagination-size {
+    width: 100px;
+    color: var(--ey-color-gray-100);
+    background: var(--ey-color-white);
+    &.ivu-select .ivu-select-selection {
+      border-radius: 4px;
+      border: 1px solid var(--ey-color-gray-200);
+      height: 30px;
+      min-height: 30px;
     }
-    .ivu-page-simple-pager {
-        pointer-events: none;
+    margin-left: 18px;
+    margin-right: 21px;
+  }
+
+  // 中间页数样式
+  .ivu-page {
+    .ivu-page-prev,
+    .ivu-page-next,
+    .ivu-page-item {
+      width: 30px;
+      height: 30px;
+      min-height: 30px;
+      border-radius: 4px;
+      border-width: 0;
+      font-weight: bold;
+      background: var(--ey-color-gray-400);
+      &:hover a {
+        color: var(--ey-color-blue-green);
+      }
+      &.ivu-page-disabled {
         cursor: pointer;
-        input {
-            border: 0;
+        a {
+          cursor: pointer;
+          color: var(--ey-color-gray-100);
         }
+        &:hover a{
+          color: var(--ey-color-blue-green);
+        }
+      }
+      .ivu-icon {
+        font-weight: bold;
+      }
     }
-    .grid-page-pre-pro {
-        transform: rotate(90deg);
-    }
-    .grid-page-next-pro {
-        transform: rotate(-90deg);
+    .ivu-page-item-active {
+      a {
+        color: var(--ey-color-white);
+      }
+      &:hover a{
+        color: var(--ey-color-white);
+      }
+      background: var(--ey-color-blue-green);
     }
-    .grid-page-pre-pro,.grid-page-next-pro {
-        font-size: 24px;
-        margin-top: -2px;
-        cursor: pointer;
+  }
+
+  // 页面跳转
+  .ivu-page-options-elevator {
+    height: 30px;
+    line-height: 30px;
+    input {
+      height: 30px;
+      width: 45px;
+      text-align: center;
     }
-    .ivu-icon {
-        font-size: 24px;
-        color: var(--app-color-gray-100);
+    input:focus {
+      border-color: var(--ey-color-blue-green);
+      box-shadow: none;
     }
-    .grid-pagination__dropdown {
-        cursor: pointer;
-        span {
-            color: var(--app-color-black);
-            font-weight: 600;
-        }
-        .ivu-icon {
-            margin-left: 15px;
-        }
+  }
+}
+
+// 分页大小popover
+.grid-pagination-size-popover {
+  padding: 0;
+  // margin: 10px 0;
+  height: 132px;
+  width: 100px;
+  .ivu-select-item {
+    color: var(--ey-color-gray-100);
+    border-bottom: 1px solid var(--ey-color-gray-250);
+    padding: 7px 16px 7px 10px;
+    text-align: left !important;
+  }
+  &.ivu-select-dropdown .ivu-select-dropdown-list .ivu-select-item.ivu-select-item-selected {
+    color: var(--ey-color-gray-100);
+    background-color: var(--ey-color-white);
+    &:hover {
+      color: var(--ey-color-black);
+      background-color: var(--ey-color-blue-green-110);
     }
-}
\ No newline at end of file
+  }
+  .ivu-select-item:hover {
+    color: var(--ey-color-black);
+    background-color: var(--ey-color-blue-green-110);
+  }
+}

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>
+  <row class="grid-pagination">
+    <span>共&nbsp;{{ totalRow }}&nbsp;条</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">
@@ -34,58 +23,57 @@ 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() totalRow!: number;
+  /**
+   * 当前页
+   *
+   * @type {number}
+   * @memberof AppGridPagination
+   */
+  @Prop() curPage!: number;
 
-    /**
-     * 当前页
-     *
-     * @type {number}
-     * @memberof AppGridPagination
-     */
-    @Prop() curPage!: number;
+  /**
+   * 分页大小
+   *
+   * @type {number}
+   * @memberof AppGridPagination
+   */
+  @Prop() limit!: 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 {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 handleChange($event: any) {
-        this.$emit('page-change', $event);
-    }
-
-    /**
-     * 处理分页大小改变
-     *
-     * @type {number}
-     * @memberof AppGridPagination
-     */
-    public handleSizeChange($event: any) {
-        this.$emit('page-size-change', $event);
-    }
+  /**
+   * 处理分页大小改变
+   *
+   * @type {number}
+   * @memberof AppGridPagination
+   */
+  public handleSizeChange($event: any) {
+    this.$emit("page-size-change", $event);
+  }
 }
 </script>