Tabs: fix lazy loading (#11461)

* Tabs: fix lazy tab-pane order

* Tabs: fix lazy loading

packages/tabs/src/tab-pane.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="el-tab-pane"
-    v-if="!lazy || active"
+    v-if="(!lazy || loaded) || active"
     v-show="active"
     role="tabpanel"
     :aria-hidden="!active"
@@ -28,7 +28,8 @@
 
     data() {
       return {
-        index: null
+        index: null,
+        loaded: false
       };
     },
 
@@ -37,7 +38,11 @@
         return this.closable || this.$parent.closable;
       },
       active() {
-        return this.$parent.currentName === (this.name || this.index);
+        const active = this.$parent.currentName === (this.name || this.index);
+        if (active) {
+          this.loaded = true;
+        }
+        return active;
       },
       paneName() {
         return this.name || this.index;

packages/tabs/src/tabs.vue

@@ -88,9 +88,7 @@
         }
       },
       addPanes(item) {
-        const index = this.$slots.default.filter(item => {
-          return item.elm.nodeType === 1 && /\bel-tab-pane\b/.test(item.elm.className);
-        }).indexOf(item.$vnode);
+        const index = this.$slots.default.indexOf(item.$vnode);
         this.panes.splice(index, 0, item);
       },
       removePanes(item) {

test/unit/specs/tabs.spec.js

@@ -494,8 +494,8 @@ describe('Tabs', () => {
 
         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);
+          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);
           done();
         });
       });