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);
+  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;
+    }
+    margin-left: 18px;
+    margin-right: 21px;
+  }
+
+  // 中间页数样式
   .ivu-page {
-        height: 25px;
-        display: flex;
+    .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-simple-pager {
-        pointer-events: none;
+      &.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);
         }
-    .grid-page-pre-pro {
-        transform: rotate(90deg);
       }
-    .grid-page-next-pro {
-        transform: rotate(-90deg);
+      .ivu-icon {
+        font-weight: bold;
       }
-    .grid-page-pre-pro,.grid-page-next-pro {
-        font-size: 24px;
-        margin-top: -2px;
-        cursor: pointer;
     }
-    .ivu-icon {
-        font-size: 24px;
-        color: var(--app-color-gray-100);
+    .ivu-page-item-active {
+      a {
+        color: var(--ey-color-white);
       }
-    .grid-pagination__dropdown {
-        cursor: pointer;
-        span {
-            color: var(--app-color-black);
-            font-weight: 600;
+      &:hover a{
+        color: var(--ey-color-white);
+      }
+      background: var(--ey-color-blue-green);
+    }
+  }
+
+  // 页面跳转
+  .ivu-page-options-elevator {
+    height: 30px;
+    line-height: 30px;
+    input {
+      height: 30px;
+      width: 45px;
+      text-align: center;
+    }
+    input:focus {
+      border-color: var(--ey-color-blue-green);
+      box-shadow: none;
+    }
+  }
+}
+
+// 分页大小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);
     }
-        .ivu-icon {
-            margin-left: 15px;
   }
+  .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>
+    <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"
-            :transfer="true"
       :total="totalRow"
-            simple
-            size="small"
+      show-elevator
       :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>
 
@@ -34,7 +23,6 @@ import { Vue, Component, Prop } from "vue-property-decorator";
 
 @Component({})
 export default class AppGridPagination extends Vue {
-
   /**
    * 总行数
    *
@@ -65,7 +53,7 @@ export default class AppGridPagination extends Vue {
    * @type {Array<*>}
    * @memberof AppGridPagination
    */
-    public pageSize= [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+  public pageSize = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
 
   /**
    * 处理当前页改变
@@ -74,7 +62,7 @@ export default class AppGridPagination extends Vue {
    * @memberof AppGridPagination
    */
   public handleChange($event: any) {
-        this.$emit('page-change', $event);
+    this.$emit("page-change", $event);
   }
 
   /**
@@ -84,7 +72,7 @@ export default class AppGridPagination extends Vue {
    * @memberof AppGridPagination
    */
   public handleSizeChange($event: any) {
-        this.$emit('page-size-change', $event);
+    this.$emit("page-size-change", $event);
   }
 }
 </script>