互联网-社管一张图，页码展示（共性）：少了设置页面条数功能

package.json

@@ -12,7 +12,7 @@
     "@types/node": "^20.1.0",
     "animate.css": "^4.1.1",
     "axios": "^1.3.4",
-    "element-plus": "^2.4.3",
+    "element-plus": "^2.5.3",
     "sass": "^1.60.0",
     "uuid": "^9.0.0",
     "vue": "^3.3.9",

src/components/cus/CusTable.vue

@@ -152,7 +152,7 @@ import {
         default: false
       },
       noLayout: {
-        default: () => ['sizes']
+        default: () => []
       },
       full: {
         default: false

src/style/cus.scss

@@ -72,21 +72,36 @@
     font-weight: 400;
     color: #AEAEAE;
   }
-  //.el-pagination__sizes {
-  //  .el-input {
-  //    max-width: 100px !important;
-  //    .el-input__wrapper {
-  //      padding-left: 8px !important;
-  //      padding-right: 8px !important;
-  //      .el-input__inner {
-  //        font-size: 14px;
-  //        font-family: Microsoft YaHei;
-  //        font-weight: 400;
-  //        color: #999999;
-  //      }
-  //    }
-  //  }
-  //}
+  .el-pagination__sizes {
+    .el-select {
+      width: auto;
+      height: 20px;
+      position: unset;
+      .el-select__wrapper {
+        position: unset;
+        color: #AEAEAE;
+        min-height: unset;
+        height: 100%;
+        padding: 0 4px;
+        .el-select__selection {
+          position: unset;
+          .el-select__selected-item {
+            position: unset;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #AEAEAE;
+            &.is-hidden {
+              display: none;
+            }
+            &.el-select__placeholder {
+              transform: none;
+            }
+          }
+        }
+      }
+    }
+  }
   .btn-prev, .btn-next {
     background-color: transparent !important;
     color: #AEAEAE !important;

src/views/gis/business/enterprise/index.vue

@@ -90,10 +90,13 @@
         </div>
         <el-pagination
             class="__cus-pagination"
-            :current-page="enterprise.table.pageNum"
+            :currentPage="enterprise.table.pageNum"
             :page-size="enterprise.table.pageSize"
-            :total="enterprise.table.total"
-            layout="total,prev,pager,next,jumper"
+            :page-sizes="[10, 20, 30, 50, 100]"
+            pager-count="4"
+            layout="total,sizes,prev,pager,next,jumper"
+            :total="Number(enterprise.table.total)"
+            @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
         />
       </div>
@@ -177,6 +180,11 @@ export default defineComponent({
       }
       onSearch()
     }
+    const handleSizeChange = (val: Number) => {
+      state.enterprise.table.pageNum = 1
+      state.enterprise.table.pageSize = val
+      handleSearch()
+    }
     const handleCurrentChange = (val: number) => {
       state.enterprise.table.pageNum = val
       handleSearch()
@@ -271,6 +279,7 @@ export default defineComponent({
       ...toRefs(state),
       onSearch,
       onReset,
+      handleSizeChange,
       handleCurrentChange,
       handleClick
     }