From 975653377a50bac2348eac59cbc9d10b8c8615a5 Mon Sep 17 00:00:00 2001
From: hetech <dengzhiyang123@126.com>
Date: Thu, 8 Aug 2019 14:49:25 +0800
Subject: [PATCH] Table: fix wrong empty block height (#16861)

---
 packages/table/src/table.vue        | 18 ++++++++++++++----
 packages/theme-chalk/src/table.scss |  1 -
 test/unit/specs/table.spec.js       | 22 ++++++++++++++++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index 63ba685799..c4c69172f9 100644
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -49,10 +49,8 @@
         v-if="!data || data.length === 0"
         class="el-table__empty-block"
         ref="emptyBlock"
-        :style="{
-          width: bodyWidth
-        }">
-        <span class="el-table__empty-text">
+        :style="emptyBlockStyle">
+        <span class="el-table__empty-text" >
           <slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot>
         </span>
       </div>
@@ -565,6 +563,18 @@
         }
       },
 
+      emptyBlockStyle() {
+        if (this.data && this.data.length) return null;
+        let height = '100%';
+        if (this.layout.appendHeight) {
+          height = `calc(100% - ${this.layout.appendHeight}px)`;
+        }
+        return {
+          width: this.bodyWidth,
+          height
+        };
+      },
+
       ...mapStates({
         selection: 'selection',
         columns: 'columns',
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index f6f6746c40..32ee8a189d 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -20,7 +20,6 @@
     min-height: 60px;
     text-align: center;
     width: 100%;
-    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
index df4208b2ec..6725198284 100644
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -1944,6 +1944,28 @@ describe('Table', () => {
     }, DELAY);
   });
 
+  it('table append is visible in viewport if height is 100%', async() => {
+    const vm = createVue({
+      template: `
+      <el-table :data="[]" height="100%">
+        <el-table-column prop="name" label="片名" />
+        <el-table-column prop="release" label="发行日期" />
+        <el-table-column prop="director" label="导演" />
+        <el-table-column prop="runtime" label="时长（分）" />
+        <template slot="append">
+          <div class="append-content" style="height: 48px;">
+            append 区域始终出现在视图内
+          </div>
+        </template>
+      </el-table>
+      `
+    }, true);
+    await waitImmediate();
+    const emptyBlockEl = vm.$el.querySelector('.el-table__empty-block');
+    expect(emptyBlockEl.style.height).to.be.equal('calc(100% - 48px)');
+    destroyVM(vm);
+  });
+
   describe('tree', () => {
     let vm;
     afterEach(() => destroyVM(vm));