From 3685b70c2f28a52ebaf9a19994a513961fc18c1b Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Fri, 11 Mar 2022 11:10:22 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=20TableHeightAdaption=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableHeightAdaption/index.vue  | 32 -------------------
 .../table.autoheight.demo.vue                 | 17 ++++------
 2 files changed, 7 insertions(+), 42 deletions(-)
 delete mode 100644 src/components/TableHeightAdaption/index.vue

diff --git a/src/components/TableHeightAdaption/index.vue b/src/components/TableHeightAdaption/index.vue
deleted file mode 100644
index 51bdc360..00000000
--- a/src/components/TableHeightAdaption/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup name="TableHeightAdaption">
-onMounted(() => {
-    nextTick(() => {
-        // 获取表头高度，然后设置 .el-table__body-wrapper 和 .el-table__fixed-body-wrapper 的 height
-        let height = document.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight
-        document.getElementsByClassName('el-table__inner-wrapper')[0].style.height = '100%'
-        document.getElementsByClassName('el-table__body-wrapper')[0].style.height = `calc(100% - ${height}px)`
-        for (let item of document.getElementsByClassName('el-table__fixed-body-wrapper')) {
-            item.style.height = `calc(100% - ${height}px)`
-        }
-    })
-})
-</script>
-
-<template>
-    <div class="adaption-container">
-        <slot />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.adaption-container {
-    height: 100%;
-    overflow-y: auto;
-    :deep(.el-table) {
-        height: 100%;
-        .el-table__body-wrapper {
-            overflow-y: auto;
-        }
-    }
-}
-</style>
diff --git a/src/views/component_extend_example/table.autoheight.demo.vue b/src/views/component_extend_example/table.autoheight.demo.vue
index 756c225b..a8386ab5 100644
--- a/src/views/component_extend_example/table.autoheight.demo.vue
+++ b/src/views/component_extend_example/table.autoheight.demo.vue
@@ -123,19 +123,16 @@ export default {
     <div class="absolute-container">
         <page-header title="表格高度自适应">
             <template #content>
-                <p>TableHeightAdaption</p>
-                <p style="margin-bottom: 0;">该组件必须包裹 ElTable 使用，并且需要对上级元素设置高度后才会生效</p>
+                <p style="margin-bottom: 0;">该特性早期通过二次封装组件实现，现在则通过设置 el-table 组件的 height 为 100% 即可</p>
             </template>
         </page-header>
         <page-main>
-            <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-table :data="dataList" border stripe highlight-current-row height="100%">
+                <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>
         </page-main>
     </div>