移除 AbsoluteContainer 组件，新增 TableHeightAdaption 组件

src/components/AbsoluteContainer/index.vue

@@ -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>

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>

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>
@@ -174,12 +174,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;
         }
     }
 }

src/router/modules/component.extend.example.js

@@ -71,7 +71,7 @@ export default {
             name: 'componentExtendExampleTableautoheight',
             component: () => import('@/views/component_extend_example/table.autoheight.demo.vue'),
             meta: {
-                title: '表格自适应'
+                title: '表格高度自适应'
             }
         },
         {

src/views/component_extend_example/table.autoheight.demo.vue

@@ -1,26 +1,28 @@
 <template>
-    <AbsoluteContainer>
-        <page-header title="表格自适应">
+    <div class="absolute-container">
+        <page-header title="表格高度自适应">
             <template #content>
-                <p>AbsoluteContainer</p>
-                <p style="margin-bottom: 0;">该组件是一个 absolute 固定容器，表格自适应需要自行实现，可参考演示源码，缩小浏览器窗口高度可查看最终效果</p>
+                <p>TableHeightAdaption</p>
+                <p style="margin-bottom: 0;">该组件必须包裹 ElTable 使用，并且需要对上级元素设置高度后才会生效</p>
             </template>
         </page-header>
         <page-main>
-            <el-table :data="dataList" border stripe highlight-current-row>
-                <el-table-column type="index" width="50" />
-                <el-table-column prop="date" label="日期" width="180" />
-                <el-table-column prop="name" label="姓名" width="180" />
-                <el-table-column prop="address" label="地址" />
-            </el-table>
-            <el-button type="primary">新增</el-button>
+            <TableHeightAdaption>
+                <el-table :data="dataList" border stripe highlight-current-row>
+                    <el-table-column type="index" width="50" />
+                    <el-table-column prop="date" label="日期" width="180" />
+                    <el-table-column prop="name" label="姓名" width="180" />
+                    <el-table-column prop="address" label="地址" />
+                </el-table>
+            </TableHeightAdaption>
+            <el-button type="primary">按钮</el-button>
         </page-main>
-    </AbsoluteContainer>
+    </div>
 </template>
 
 <script>
 export default {
-    name: 'ComponentExampleAbsoluteContainer',
+    name: 'ComponentExampleTableHeightAdaption',
     props: {},
     data() {
         return {
@@ -125,35 +127,28 @@ export default {
                     name: '王小虎',
                     address: '上海市普陀区金沙江路 1516 弄'
                 }
-            ],
-            selectionDataList: []
+            ]
         }
-    },
-    created() {},
-    mounted() {
-        this.$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)`
-        })
-    },
-    methods: {}
+    }
 }
 </script>
 
 <style lang="scss" scoped>
-.page-main {
+.absolute-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
-
-    // 减去的 40px 为 page-main 的上下 margin
-    // 减去的 130px 为 page-header 的高度，如果没有设置，可以去掉
-
-    height: calc(100% - 40px - 130px);
-    :deep(.el-table) {
-        height: 100%;
-        .el-table__body-wrapper {
-            overflow-y: auto;
+    .page-main {
+        // 让 page-main 的高度自适应
+        flex: 1;
+        overflow: auto;
+        margin-top: 0;
+        display: flex;
+        flex-direction: column;
+        .el-button {
+            margin-top: 20px;
         }
     }
 }