样式修改

src/components/TableModel2/index.vue

@@ -69,6 +69,8 @@
                 </div>
             </div>
 
+            <!-- 表格容器，添加最大高度和滚动 -->
+            <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"
@@ -99,6 +101,7 @@
                         </template>
                     </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 {
         }
     }
 
+    // 新增表格容器样式
+    .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;
+        flex-shrink: 0;
-        padding-top: 16px;
+        margin-top: 16px;
+        padding: 0;
         text-align: right;
+        background: #fff;
+        padding-top: 16px;
     }
 }
 

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%;

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;
 

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 0 0 20px;
-    padding: 0 20px;
+    margin-bottom: 20px;
 
     .back-btn {
         width: 98px;