From ee380d69442d1c0769c484723334fc94cf33065d Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Wed, 15 Dec 2021 00:20:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=20AbsoluteContainer=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=96=B0=E5=A2=9E=20TableHeightAdap?=
 =?UTF-8?q?tion=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AbsoluteContainer/index.vue   | 18 -------------
 src/components/TableHeightAdaption/index.vue | 28 ++++++++++++++++++++
 src/layout/index.vue                         |  5 ++--
 3 files changed, 30 insertions(+), 21 deletions(-)
 delete mode 100644 src/components/AbsoluteContainer/index.vue
 create mode 100644 src/components/TableHeightAdaption/index.vue

diff --git a/src/components/AbsoluteContainer/index.vue b/src/components/AbsoluteContainer/index.vue
deleted file mode 100644
index 13d743eb..00000000
--- a/src/components/AbsoluteContainer/index.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <div class="absolute-container">
-        <slot />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.absolute-container {
-    position: absolute;
-    width: 100%;
-    transition: 0.3s;
-}
-.main-container {
-    .topbar-container + .main .absolute-container {
-        height: calc(100% - #{$g-topbar-height});
-    }
-}
-</style>
diff --git a/src/components/TableHeightAdaption/index.vue b/src/components/TableHeightAdaption/index.vue
new file mode 100644
index 00000000..5a90b436
--- /dev/null
+++ b/src/components/TableHeightAdaption/index.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="adaption-container">
+        <slot />
+    </div>
+</template>
+
+<script setup name="TableHeightAdaption">
+onMounted(() => {
+    nextTick(() => {
+        // 获取表头高度，然后设置 .el-table__body-wrapper 的 height
+        let height = document.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight
+        document.getElementsByClassName('el-table__body-wrapper')[0].style.height = `calc(100% - ${height}px)`
+    })
+})
+</script>
+
+<style lang="scss" scoped>
+.adaption-container {
+    height: 100%;
+    overflow: auto;
+    :deep(.el-table) {
+        height: 100%;
+        .el-table__body-wrapper {
+            overflow-y: auto;
+        }
+    }
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 65db6f6f..7ef387db 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -9,7 +9,7 @@
                 </div>
                 <div class="sidebar-mask" :class="{'show': $store.state.settings.mode === 'mobile' && !$store.state.settings.sidebarCollapse}" @click="$store.commit('settings/toggleSidebarCollapse')" />
                 <div class="main-container" :style="{'padding-bottom': $route.meta.paddingBottom}">
-                    <Topbar />
+                    <Topbar v-if="!($store.state.settings.menuMode === 'head' && !$store.state.settings.enableSidebarCollapse && !$store.state.settings.enableBreadcrumb)" />
                     <div class="main">
                         <router-view v-slot="{ Component, route }">
                             <transition name="main" mode="out-in" appear>
@@ -172,12 +172,11 @@ function switchMenu(index) {
             height: 100%;
             flex: auto;
             position: relative;
-            padding: $g-topbar-height 0 0;
             overflow: hidden;
             transition: 0.3s;
         }
         .topbar-container + .main {
-            padding: $g-topbar-height 0 0;
+            margin: $g-topbar-height 0 0;
         }
     }
 }