From 6a42b664038aff426bd87fb7935f2b3fa54346b5 Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Wed, 28 Sep 2016 15:20:50 +0800
Subject: [PATCH] fixed tabs bug when close tab
---
CHANGELOG.md | 1 +
examples/docs/tabs.md | 8 ++++----
packages/tabs/src/tab-pane.vue | 4 ++++
packages/tabs/src/tabs.vue | 14 +++++---------
4 files changed, 14 insertions(+), 13 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31daa3bd8..1c4f8fe79 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
- 修复 DatePicker 初始值是合法时间类型但无法设置成功的问题
- 修复 Pagination 的图标没有正确切换样式, #163
- 修复 Row 组件 align 属性不生效的问题
+- 修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题
#### 非兼容性更新
- Menu 组件的 `unique-opend` 属性修正为 `unique-opened`
diff --git a/examples/docs/tabs.md b/examples/docs/tabs.md
index ef5495eab..07df20160 100644
--- a/examples/docs/tabs.md
+++ b/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' |
diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue
index 9d9889f03..6b51a12b1 100644
--- a/packages/tabs/src/tab-pane.vue
+++ b/packages/tabs/src/tab-pane.vue
@@ -33,6 +33,10 @@
}
},
+ destroyed() {
+ this.$el.remove();
+ },
+
watch: {
name: {
immediate: true,
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
index 1e6ea1906..74ef7190d 100644
--- a/packages/tabs/src/tabs.vue
+++ b/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));
}