From 49473ffafcb7f937d424f33fc890400c47de5b81 Mon Sep 17 00:00:00 2001
From: Wenlu Wang <kingwenlu@gmail.com>
Date: Wed, 23 May 2018 19:04:51 +0800
Subject: [PATCH] add support of tab penl lazy render(#11022) (#11167)

* add support of tab penl lazy render

* add docs

* fix test

* Tabs: update tab-pane.d.ts

* Docs: update Tabs docs
---
 examples/docs/en-US/tabs.md    |  1 +
 examples/docs/es/tabs.md       |  1 +
 examples/docs/zh-CN/tabs.md    |  1 +
 packages/tabs/src/tab-pane.vue |  4 +++-
 test/unit/specs/tabs.spec.js   | 30 ++++++++++++++++++++++++++++++
 types/tab-pane.d.ts            |  3 +++
 6 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md
index e96079956..6eedc0bbc 100644
--- a/examples/docs/en-US/tabs.md
+++ b/examples/docs/en-US/tabs.md
@@ -393,3 +393,4 @@ Only card type Tabs support addable & closeable.
 | disabled | whether Tab is disabled | boolean | — | false |
 | name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
 | closable  | whether Tab is closable | boolean   | — |  false  |
+| lazy  | whether Tab is lazy to render   | boolean   | — |  false  |
\ No newline at end of file
diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md
index fab0e2826..b2024f8a3 100644
--- a/examples/docs/es/tabs.md
+++ b/examples/docs/es/tabs.md
@@ -393,3 +393,4 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 | disabled | si la Tabulación está deshabilitada      | boolean | —                 | false                                    |
 | name     | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string  | —                 | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
 | closable | si el Tab es cerrable                    | boolean | —                 | false                                    |
+| lazy     | whether Tab is lazy to render            | boolean | —                 | false                                    |
diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md
index 26ecc4394..e84aeaf06 100644
--- a/examples/docs/zh-CN/tabs.md
+++ b/examples/docs/zh-CN/tabs.md
@@ -391,3 +391,4 @@
 | disabled | 是否禁用 | boolean | — | false |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
+| lazy  | 标签是否延迟渲染   | boolean   | — |  false  |
diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue
index 1412b4f41..90f2da292 100644
--- a/packages/tabs/src/tab-pane.vue
+++ b/packages/tabs/src/tab-pane.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="el-tab-pane"
+    v-if="!lazy || active"
     v-show="active"
     role="tabpanel"
     :aria-hidden="!active"
@@ -21,7 +22,8 @@
       labelContent: Function,
       name: String,
       closable: Boolean,
-      disabled: Boolean
+      disabled: Boolean,
+      lazy: Boolean
     },
 
     data() {
diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js
index a83414ffe..0ea8217c1 100644
--- a/test/unit/specs/tabs.spec.js
+++ b/test/unit/specs/tabs.spec.js
@@ -471,6 +471,36 @@ describe('Tabs', () => {
       });
     }, 100);
   });
+  it('should work with lazy', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs">
+          <el-tab-pane label="用户管理" name="A">A</el-tab-pane>
+          <el-tab-pane label="配置管理" name="B">B</el-tab-pane>
+          <el-tab-pane label="角色管理" name="C">C</el-tab-pane>
+          <el-tab-pane label="定时任务补偿" lazy name="D">D</el-tab-pane>
+        </el-tabs>
+      `
+    }, true);
+
+    expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(3);
+    expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).to.be.equal(null);
+
+    setTimeout(_ => {
+      vm.$el.querySelector('.el-tabs__nav > #tab-D').click();
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(4);
+        expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).not.to.be.equal(null);
+
+        vm.$el.querySelector('.el-tabs__nav > #tab-A').click();
+        vm.$nextTick(() => {
+          expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(3);
+          expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).to.be.equal(null);
+          done();
+        });
+      });
+    }, 100);
+  });
   it('before leave', done => {
     vm = createVue({
       template: `
diff --git a/types/tab-pane.d.ts b/types/tab-pane.d.ts
index bf0be311e..3cae4baba 100644
--- a/types/tab-pane.d.ts
+++ b/types/tab-pane.d.ts
@@ -13,4 +13,7 @@ export declare class ElTabPane extends ElementUIComponent {
 
   /** Whether Tab is closable */
   closable: boolean
+
+  /** Whether Tab is lazy to render */
+  lazy: boolean
 }