From c2f89b03929c00c811ebc1bcac2cf80a108b336b Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Mon, 27 Oct 2025 18:09:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableModel2/index.vue          | 111 ++++++++++++------
 .../technical/components/LeftType.vue         |   3 +-
 .../technical/components/RightTable.vue       |   4 +-
 .../enterpriseLibrary/technical/index.vue     |  10 +-
 4 files changed, 83 insertions(+), 45 deletions(-)

diff --git a/src/components/TableModel2/index.vue b/src/components/TableModel2/index.vue
index bc39142..e09bebb 100644
--- a/src/components/TableModel2/index.vue
+++ b/src/components/TableModel2/index.vue
@@ -69,36 +69,39 @@
                 </div>
             </div>
 
-            <el-table ref="tableRef" :data="tableList" style="width: 100%" v-loading="loading" select-on-indeterminate
-                @selection-change="handleSelectionChange">
-                <el-table-column width="45" align="center" type="selection" :selectable="selectable"
-                    v-if="selectionShow && isSelectShow" />
-                <el-table-column fixed width="55" label="序号" type="index" align="center" :index="(index) =>
-                        (queryParams.pageNum - 1) * queryParams.pageSize +
-                        index +
-                        1
-                    " v-if="indexNumShow" />
-                <el-table-column :key="v" align="center" :label="item.t_label" :prop="item.t_props"
-                    :width="item.t_width" show-overflow-tooltip v-for="(item, v) in tableColumCheckProps">
-                    <template slot-scope="scope">
-                        <!-- 判断当前列数据是否需要使用插槽的数据 -->
-                        <template v-if="item.t_slot">
-                            <slot :data="scope.row" :name="item.t_slot"></slot>
+            <!-- 表格容器，添加最大高度和滚动 -->
+            <div class="table-container" :style="tableContainerStyle">
+                <el-table ref="tableRef" :data="tableList" style="width: 100%" v-loading="loading" select-on-indeterminate
+                    @selection-change="handleSelectionChange">
+                    <el-table-column width="45" align="center" type="selection" :selectable="selectable"
+                        v-if="selectionShow && isSelectShow" />
+                    <el-table-column fixed width="55" label="序号" type="index" align="center" :index="(index) =>
+                            (queryParams.pageNum - 1) * queryParams.pageSize +
+                            index +
+                            1
+                        " v-if="indexNumShow" />
+                    <el-table-column :key="v" align="center" :label="item.t_label" :prop="item.t_props"
+                        :width="item.t_width" show-overflow-tooltip v-for="(item, v) in tableColumCheckProps">
+                        <template slot-scope="scope">
+                            <!-- 判断当前列数据是否需要使用插槽的数据 -->
+                            <template v-if="item.t_slot">
+                                <slot :data="scope.row" :name="item.t_slot"></slot>
+                            </template>
+                            <template v-else>
+                                {{ scope.row[item.t_props] || '-' }}
+                            </template>
                         </template>
-                        <template v-else>
-                            {{ scope.row[item.t_props] || '-' }}
+                    </el-table-column>
+                    <el-table-column align="center" label="操作" :width="handleColWidth" :show-overflow-tooltip="false"
+                        fixed="right" v-if="handleShow && showOperation">
+                        <template slot-scope="{ row }">
+                            <div class="optionDivRef">
+                                <slot :data="row" name="handle">-</slot>
+                            </div>
                         </template>
-                    </template>
-                </el-table-column>
-                <el-table-column align="center" label="操作" :width="handleColWidth" :show-overflow-tooltip="false"
-                    fixed="right" v-if="handleShow && showOperation">
-                    <template slot-scope="{ row }">
-                        <div class="optionDivRef">
-                            <slot :data="row" name="handle">-</slot>
-                        </div>
-                    </template>
-                </el-table-column>
-            </el-table>
+                    </el-table-column>
+                </el-table>
+            </div>
 
             <!-- 分页 -->
             <pagination :total="total" @pagination="getTableList" :page.sync="queryParams.pageNum"
@@ -190,6 +193,11 @@ export default {
             type: Boolean,
             default: false,
         },
+        // 表格最大高度（像素），默认600px
+        tableMaxHeight: {
+            type: [Number, String],
+            default: 600
+        },
     },
     computed: {
         /* 根据操作栏控制表头是否显示 */
@@ -202,13 +210,23 @@ export default {
         tableCardStyle() {
             const baseHeight = this.showSearch ? 200 : 120; // 搜索区域高度
             const toolbarHeight = this.showRightTools ? 40 : 0; // 工具栏高度
-            const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + 25}px)`;
+            const paginationHeight = 60; // 分页区域高度
+            const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + 25}px)`;
             return {
                 height: availableHeight,
                 display: 'flex',
                 flexDirection: 'column'
             }
         },
+        /* 表格容器样式 */
+        tableContainerStyle() {
+            return {
+                flex: 1,
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column'
+            }
+        },
     },
     watch: {
         columnsList: {
@@ -551,8 +569,8 @@ export default {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        // margin-bottom: 16px;
         padding-bottom: 12px;
+        flex-shrink: 0;
 
         .table-title {
             font-size: 16px;
@@ -567,15 +585,36 @@ export default {
         }
     }
 
-    ::v-deep .el-table {
-        width: 100%;
-        margin-bottom: 0;
+    // 新增表格容器样式
+    .table-container {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        min-height: 0; // 确保容器可以收缩
+        
+        ::v-deep .el-table {
+            flex: 1;
+            height: 100%;
+            width: 100%;
+            margin-bottom: 0;
+            
+            // 确保表格体可以滚动
+            .el-table__body-wrapper {
+                overflow-x: auto;
+                overflow-y: auto;
+                max-height: 100%;
+            }
+        }
     }
 
     ::v-deep .el-pagination {
-        margin-top: 0;
-        padding-top: 16px;
+        flex-shrink: 0;
+        margin-top: 16px;
+        padding: 0;
         text-align: right;
+        background: #fff;
+        padding-top: 16px;
     }
 }
 
@@ -633,4 +672,4 @@ export default {
         }
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/technical/components/LeftType.vue b/src/views/enterpriseLibrary/technical/components/LeftType.vue
index a44afa8..d0e0581 100644
--- a/src/views/enterpriseLibrary/technical/components/LeftType.vue
+++ b/src/views/enterpriseLibrary/technical/components/LeftType.vue
@@ -108,10 +108,9 @@ export default {
 
 <style scoped lang="scss">
 .sidebar-card {
-    height: 100%;
+    height: calc(100vh - 175px);
     display: flex;
     flex-direction: column;
-    margin: 20px;
 
     ::v-deep .el-card__body {
         height: 100%;
diff --git a/src/views/enterpriseLibrary/technical/components/RightTable.vue b/src/views/enterpriseLibrary/technical/components/RightTable.vue
index 6950360..d4dd35d 100644
--- a/src/views/enterpriseLibrary/technical/components/RightTable.vue
+++ b/src/views/enterpriseLibrary/technical/components/RightTable.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- 技术方案列表 -->
-    <div class="app-container">
+    <div class="right-table-card">
         <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="userTableRef"
             :columnsList="columnsList" :request-api="listUser">
             <template slot="tableTitle">
@@ -124,7 +124,7 @@ export default {
 }
 
 .right-table-card {
-    height: 100%;
+    height: calc(100vh - 175px);
     overflow-y: hidden;
     transition: overflow-y 0.3s ease;
 
diff --git a/src/views/enterpriseLibrary/technical/index.vue b/src/views/enterpriseLibrary/technical/index.vue
index fc725a7..9623b4f 100644
--- a/src/views/enterpriseLibrary/technical/index.vue
+++ b/src/views/enterpriseLibrary/technical/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="technical-container">
+    <div class="app-container">
         <!-- 返回按钮 -->
         <div class="back-container">
             <el-button type="default" size="small" @click="handleBack" class="back-btn">
@@ -7,7 +7,7 @@
             </el-button>
         </div>
         <div class="layout-container">
-            <el-row>
+            <el-row :gutter="18">
                 <el-col :span="5" class="left-col">
                     <LeftType :value="activeCategory" @change="handleCategoryChange" @add-category="handleAddCategory"
                         @category-command="handleCategoryCommand" :enterpriseId="enterpriseId" />
@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.technical-container {
+.app-container {
     height: calc(100vh - 84px);
     overflow: hidden;
     background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
@@ -90,8 +90,8 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    margin-bottom: 30px;
-    padding: 0 20px;
+    padding: 0 0 0 20px;
+    margin-bottom: 20px;
 
     .back-btn {
         width: 98px;