完成“参数管理”的设置每页大小

main/manager-web/src/views/ParamsManagement.vue

@@ -16,7 +16,7 @@
                 <div class="content-area">
                     <el-card class="params-card" shadow="never">
                         <el-table ref="paramsTable" :data="paramsList" class="transparent-table"
-                            :header-cell-class-name="headerCellClassName">
+                            :header-cell-class-name="headerCellClassName" :max-height="tableMaxHeight">
                             <el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
                             <el-table-column label="参数编码" prop="paramCode" align="center"></el-table-column>
                             <el-table-column label="参数值" prop="paramValue" align="center"
@@ -40,6 +40,14 @@
                                     @click="deleteParam($refs.paramsTable.selection)">删除</el-button>
                             </div>
                             <div class="custom-pagination">
+                                <el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
+                                    <el-option
+                                        v-for="item in pageSizeOptions"
+                                        :key="item"
+                                        :label="`${item}条/页`"
+                                        :value="item">
+                                    </el-option>
+                                </el-select>
                                 <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">
                                     首页
                                 </button>
@@ -82,10 +90,12 @@ export default {
             paramsList: [],
             currentPage: 1,
             pageSize: 5,
+            pageSizeOptions: [5, 10, 20, 50, 100],
             total: 0,
             dialogVisible: false,
             dialogTitle: "新增参数",
             isAllSelected: false,
+            tableMaxHeight: 400,
             paramForm: {
                 id: null,
                 paramCode: "",
@@ -96,7 +106,9 @@ export default {
     },
     created() {
         this.fetchParams();
+
     },
+
     computed: {
         pageCount() {
             return Math.ceil(this.total / this.pageSize);
@@ -118,6 +130,11 @@ export default {
         },
     },
     methods: {
+        handlePageSizeChange(val) {
+            this.pageSize = val;
+            this.currentPage = 1;
+            this.fetchParams();
+        },
         fetchParams() {
             Api.admin.getParamsList(
                 {
@@ -192,7 +209,6 @@ export default {
                 return;
             }
 
-
             const paramCount = params.length;
             this.$confirm(`确定要删除选中的${paramCount}个参数吗？`, '警告', {
                 confirmButtonText: '确定',
@@ -212,7 +228,7 @@ export default {
                             message: `成功删除${paramCount}个参数`,
                             showClose: true
                         });
-                        this.fetchParams(); // 刷新参数列表
+                        this.fetchParams();
                     } else {
                         this.$message.error({
                             message: data.msg || '删除失败，请重试',
@@ -346,6 +362,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     margin-top: 10px;
+    padding-bottom: 10px;
 }
 
 .ctrl_btn {
@@ -402,6 +419,10 @@ export default {
     gap: 8px;
     margin-top: 15px;
 
+    .el-select {
+      margin-right: 8px;
+    }
+
     .pagination-btn:first-child,
     .pagination-btn:nth-child(2),
     .pagination-btn:nth-last-child(2) {
@@ -462,6 +483,7 @@ export default {
 
 :deep(.transparent-table) {
     background: white;
+    flex: 1;
 
     .el-table__header th {
         background: white !important;
@@ -550,4 +572,29 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.page-size-select {
+    width: 100px;
+    margin-right: 8px;
+
+    :deep(.el-input__inner) {
+        height: 32px;
+        line-height: 32px;
+        border-radius: 4px;
+        border: 1px solid #e4e7ed;
+        background: #dee7ff;
+        color: #606266;
+        font-size: 14px;
+    }
+
+    :deep(.el-input__suffix) {
+        line-height: 32px;
+    }
+}
+
+:deep(.el-table) {
+    .el-table__body-wrapper {
+        transition: height 0.3s ease;
+    }
+}
 </style>