表格优化

src/components/TableModel2/index.vue

@@ -71,7 +71,7 @@
 
       <!-- 表格容器，添加最大高度和滚动 -->
       <div class="table-container" :style="tableContainerStyle">
-        <el-table ref="tableRef" :data="tableList" style="width: 100%" :max-height="tableMaxHeight"
+        <el-table ref="tableRef" :data="tableList" style="width: 100%" :max-height="computedTableMaxHeight"
                   v-loading="loading" select-on-indeterminate @selection-change="handleSelectionChange"
                   @current-change="handleCurrentChange" highlight-current-row>
           <el-table-column width="45" align="center" type="selection" :selectable="selectable"
@@ -113,8 +113,10 @@
       </div>
 
       <!-- 分页 -->
-      <pagination :total="total" @pagination="getTableList" :page.sync="queryParams.pageNum"
-                  :limit.sync="queryParams.pageSize" />
+      <div class="pagination-wrapper">
+        <pagination :total="total" @pagination="getTableList" :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize" />
+      </div>
     </el-card>
   </div>
 </template>
@@ -207,10 +209,10 @@ export default {
       type: Boolean,
       default: false,
     },
-    // 表格最大高度（像素），默认600px
+    // 表格最大高度（像素），默认700px
     tableMaxHeight: {
       type: [Number, String],
-      default: 600,
+      default: 700,
     },
     // 是否自动加载数据 默认自动加载
     autoLoad: {
@@ -257,7 +259,29 @@ export default {
     },
     /* 表格容器样式 */
     tableContainerStyle() {
-      return {}
+      return {
+        flex: '1 1 auto',
+        minHeight: 0,
+        overflow: 'hidden',
+      }
+    },
+    /* 计算表格实际最大高度，减去分页区域高度 */
+    computedTableMaxHeight() {
+      // 分页区域高度：基础高度 + margin + padding（考虑分页条数选择器展开的情况）
+      const paginationHeight = 100 // 分页区域高度（包含margin和padding，以及下拉选择器展开的高度）
+      const tableHeaderHeight = (this.$slots.tableTitle || this.$slots.tableActions) ? 50 : 0 // 表格头部高度
+      const cardPadding = 40 // 卡片内边距（上下各20px）
+      const totalReservedHeight = paginationHeight + tableHeaderHeight + cardPadding
+      
+      if (typeof this.tableMaxHeight === 'number') {
+        const calculatedHeight = this.tableMaxHeight - totalReservedHeight
+        return calculatedHeight > 200 ? calculatedHeight : 200 // 确保最小高度200px
+      } else {
+        // 如果是字符串（如 '600px'），解析并计算
+        const heightValue = parseInt(String(this.tableMaxHeight).replace('px', '')) || 600
+        const calculatedHeight = heightValue - totalReservedHeight
+        return calculatedHeight > 200 ? calculatedHeight : 200 // 确保最小高度200px
+      }
     },
   },
   watch: {
@@ -676,6 +700,9 @@ export default {
   // 新增表格容器样式
   .table-container {
     width: 100%;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
 
     ::v-deep .el-table {
       width: 100%;
@@ -683,13 +710,18 @@ export default {
     }
   }
 
-  ::v-deep .el-pagination {
+  .pagination-wrapper {
     flex-shrink: 0;
     margin-top: 16px;
+    padding-top: 16px;
+    width: 100%;
+  }
+
+  ::v-deep .el-pagination {
+    margin: 0;
     padding: 0;
     text-align: right;
     background: #fff;
-    padding-top: 16px;
   }
 }