Merge pull request #177 from baiyaaaaa/update-tabs

fixed tabs bug when close tab

CHANGELOG.md

@@ -11,6 +11,7 @@
 - 修复 DatePicker 初始值是合法时间类型但无法设置成功的问题
 - 修复 Pagination 的图标没有正确切换样式, #163
 - 修复 Row 组件 align 属性不生效的问题
+- 修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题
 
 #### 非兼容性更新
 - Menu 组件的 `unique-opend` 属性修正为 `unique-opened`

examples/docs/tabs.md

@@ -27,8 +27,8 @@
 
 ```html
 <template>
-  <el-tabs :active-name="activeName">
-    <el-tab-pane name="first" label="用户管理"></el-tab-pane>
+  <el-tabs>
+    <el-tab-pane label="用户管理"></el-tab-pane>
     <el-tab-pane label="配置管理"></el-tab-pane>
     <el-tab-pane label="角色管理"></el-tab-pane>
     <el-tab-pane label="定时任务补偿"></el-tab-pane>
@@ -126,7 +126,7 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | type     | 风格类型   | string   | card, border-card  |     —    |
 | closable  | 标签是否可关闭   | boolean   | true, false |  false  |
-| active-name  | 选中选项卡的 name  | string   |  —  |  —  |
+| active-name  | 选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 
 ### Tabs Events
 | 事件名称 | 说明 | 回调参数 |
@@ -138,4 +138,4 @@
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
-| name       | 与选项卡 activeName 对应的标识符，表示选项卡别名   | string   | — |  该选项卡在选项卡中的 name 值，如第一个选项卡则为'1'  |
+| name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |

packages/tabs/src/tab-pane.vue

@@ -33,6 +33,10 @@
       }
     },
 
+    destroyed() {
+      this.$el.remove();
+    },
+
     watch: {
       name: {
         immediate: true,

packages/tabs/src/tabs.vue

@@ -29,8 +29,7 @@
     watch: {
       activeName: {
         handler(val) {
-          var fisrtKey = this.$children[0] && this.$children[0].key || '1';
-          this.currentName = val || fisrtKey;
+          this.currentName = val;
         }
       },
 
@@ -51,9 +50,8 @@
         }
 
         if (tab.key === this.currentName) {
-          let deleteIndex = this.$children.indexOf(tab);
-          let nextChild = this.$children[deleteIndex + 1];
-          let prevChild = this.$children[deleteIndex - 1];
+          let nextChild = this.tabs[index];
+          let prevChild = this.tabs[index - 1];
 
           this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
         }
@@ -90,10 +88,8 @@
       }
     },
     mounted() {
-      if (!this.currentName) {
-        var fisrtKey = this.$children[0] && this.$children[0].key || '1';
-        this.currentName = this.activeName || fisrtKey;
-      }
+      var fisrtKey = this.$children[0].key || '1';
+      this.currentName = this.activeName || fisrtKey;
       this.$children.forEach(tab => this.tabs.push(tab));
       this.$nextTick(() => this.calcBarStyle(true));
     }