fixed #5401 , close #5403

examples/routers/tabs.vue

@@ -1,48 +1,18 @@
 <template>
-    <Tabs type="card" :animated="true" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
-        <Wrapper>
-            <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
-            <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
-            <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
-        </Wrapper>
-    </Tabs>
-
-    <!--<Tabs type="card" :animated="true" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">-->
-        <!--<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>-->
-        <!--<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>-->
-        <!--<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>-->
-    <!--</Tabs>-->
+    <div>
+        <Button @click="showSecond = !showSecond">change</Button>
+        <Tabs value="name1">
+            <TabPane label="标签一" name="name1" :index="1">标签一的内容</TabPane>
+            <TabPane label="标签二" name="name2" :index="2" v-if="showSecond">标签二的内容</TabPane>
+            <TabPane label="标签三" name="name3" :index="3">标签三的内容</TabPane>
+        </Tabs>
+    </div>
 </template>
 <script>
-    import Wrapper from '../components/wrapper.vue';
     export default {
-        components: { Wrapper },
         data () {
             return {
-                tab0: true,
-                tab1: true,
-                tab2: true
-            }
-        },
-        methods: {
-            handleTabRemove (name) {
-                this['tab' + name] = false;
-            },
-            handleBeforeRemove (index) {
-                console.log(index);
-
-                return new Promise((resolve, reject) => {
-                    this.$Modal.confirm({
-                        title: 'Title',
-                        content: '<p>Content of dialog</p><p>Content of dialog</p>',
-                        onOk: () => {
-                            resolve();
-                        },
-                        onCancel: () => {
-                            reject();
-                        }
-                    });
-                });
+                showSecond: false
             }
         }
     }

src/components/tabs/pane.vue

@@ -30,6 +30,11 @@
             tab: {
                 type: String
             },
+            // 在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序
+            // 数值需大于 0
+            index: {
+                type: Number
+            }
         },
         data () {
             return {

src/components/tabs/tabs.vue

@@ -187,6 +187,14 @@
                     }
                 });
 
+                // 在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序
+                TabPanes.sort((a, b) => {
+                    if (a.index && b.index) {
+                        return a.index > b.index ? 1 : -1;
+                    } else {
+                        return 1;
+                    }
+                });
                 return TabPanes;
             },
             updateNav () {