From 7ac93678e219da270b471f651a4034c2eb6cac3a Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Fri, 30 Oct 2020 15:05:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E6=BC=94=E7=A4=BA=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BB=9D=E5=AF=B9=E5=AE=9A=E4=BD=8D=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=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    | 25 +++++++++++++++++++
 .../component_example/table.autoheight.vue    | 23 +++++++++--------
 2 files changed, 37 insertions(+), 11 deletions(-)
 create mode 100644 src/components/AbsoluteContainer/index.vue

diff --git a/src/components/AbsoluteContainer/index.vue b/src/components/AbsoluteContainer/index.vue
new file mode 100644
index 00000000..2fd5c799
--- /dev/null
+++ b/src/components/AbsoluteContainer/index.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="absolute-container">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AbsoluteContainer',
+    props: {},
+    data() {
+        return {}
+    },
+    mounted() {},
+    methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.absolute-container {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - #{$g-breadcrumb-height});
+}
+</style>
diff --git a/src/views/component_example/table.autoheight.vue b/src/views/component_example/table.autoheight.vue
index 6b0dc1c2..ef06aa57 100644
--- a/src/views/component_example/table.autoheight.vue
+++ b/src/views/component_example/table.autoheight.vue
@@ -1,6 +1,11 @@
 <template>
-    <div class="table-auto-height">
-        <page-header title="表格自适应" content="缩小浏览器窗口高度看看效果。该演示非组件，由于实际页面情况复杂且不可控，故提供了一种实现思路" />
+    <AbsoluteContainer>
+        <page-header title="表格自适应">
+            <template #content>
+                <p>AbsoluteContainer</p>
+                <p style="margin-bottom: 0;">该组件是一个 absolute 固定容器，表格自适应需要自行实现，可参考演示源码，缩小浏览器窗口高度可查看最终效果</p>
+            </template>
+        </page-header>
         <page-main>
             <el-table :data="dataList" border stripe highlight-current-row>
                 <el-table-column type="index" width="50" />
@@ -8,13 +13,14 @@
                 <el-table-column prop="name" label="姓名" width="180" />
                 <el-table-column prop="address" label="地址" />
             </el-table>
+            <el-button type="primary">新增</el-button>
         </page-main>
-    </div>
+    </AbsoluteContainer>
 </template>
 
 <script>
 export default {
-    name: 'ComponentExampleBatchactionbar',
+    name: 'ComponentExampleAbsoluteContainer',
     props: {},
     data() {
         return {
@@ -136,19 +142,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.table-auto-height {
-    position: absolute;
-    height: calc(100% - #{$g-breadcrumb-height});
-    width: 100%;
-}
 .page-main {
     display: flex;
     flex-direction: column;
 
     // 减去的 40px 为 page-main 的上下 margin
-    // 减去的 91px 为 page-header 的高度，如果没有设置，可以去掉
+    // 减去的 130px 为 page-header 的高度，如果没有设置，可以去掉
 
-    height: calc(100% - 40px - 91px);
+    height: calc(100% - 40px - 130px);
     ::v-deep .el-table {
         height: 100%;
         .el-table__body-wrapper {