From 5b143a2b3f0d690f6a48b251203c68de97abe55d Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Fri, 15 Mar 2019 15:44:27 +0800
Subject: [PATCH] fixed #5401 , close #5403

---
 examples/routers/tabs.vue    | 48 +++++++++---------------------------------------
 src/components/tabs/pane.vue |  5 +++++
 src/components/tabs/tabs.vue |  8 ++++++++
 3 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 5c6edac..38ac2f0 100644
--- a/examples/routers/tabs.vue
+++ b/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
             }
         }
     }
diff --git a/src/components/tabs/pane.vue b/src/components/tabs/pane.vue
index 7a14a76..318e011 100644
--- a/src/components/tabs/pane.vue
+++ b/src/components/tabs/pane.vue
@@ -30,6 +30,11 @@
             tab: {
                 type: String
             },
+            // 在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序
+            // 数值需大于 0
+            index: {
+                type: Number
+            }
         },
         data () {
             return {
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index b3e8062..5f1000d 100644
--- a/src/components/tabs/tabs.vue
+++ b/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 () {
--
libgit2 0.21.4