Table: fix wrong empty block height (ElemeFE#16861)

lzq4047 · May 22, 2020 · 9756533 · 9756533
1 parent ddadfb4
commit 9756533
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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));