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

@@ -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  |

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                                    |

examples/docs/zh-CN/tabs.md

@@ -391,3 +391,4 @@
 | disabled | 是否禁用 | boolean | — | false |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
+| lazy  | 标签是否延迟渲染   | boolean   | — |  false  |

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() {

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: `

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
 }