From 28d2dd60ed2ac4af57ae1f1222188c9e8ed324d6 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 27 Nov 2025 13:09:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableModel2/index.vue | 48 +++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/TableModel2/index.vue b/src/components/TableModel2/index.vue
index fe554c7..24a109d 100644
--- a/src/components/TableModel2/index.vue
+++ b/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;
   }
 }