From 9736448b549b4db182a4b1c3e413d71f5ddaab02 Mon Sep 17 00:00:00 2001
From: Akshay Jat <akshayjat06@gmail.com>
Date: Mon, 25 Mar 2019 16:51:51 +0530
Subject: [PATCH] Tabs: rerender when label changes (#14496)

* tab: fix active bar bug (#14416)

fix: Tab active bar doesn't resize when tab label changes dynamically

* tab: fix active bar bug

changes done as suggested in review
---
 packages/tabs/src/tab-pane.vue | 2 +-
 packages/tabs/src/tabs.vue     | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue
index bb6d4f156..54e8fce52 100644
--- a/packages/tabs/src/tab-pane.vue
+++ b/packages/tabs/src/tab-pane.vue
@@ -51,7 +51,7 @@
 
     watch: {
       label() {
-        this.$parent.$forceUpdate();
+        this.$parent.$emit('tabLabelChanged');
       }
     }
   };
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
index d70d28c89..45cad6903 100644
--- a/packages/tabs/src/tabs.vue
+++ b/packages/tabs/src/tabs.vue
@@ -55,13 +55,14 @@
     },
 
     methods: {
-      calcPaneInstances() {
+      calcPaneInstances(isLabelUpdated = false) {
         if (this.$slots.default) {
           const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
             vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');
           // update indeed
           const panes = paneSlots.map(({ componentInstance }) => componentInstance);
-          if (!(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]))) {
+          const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));
+          if (isLabelUpdated || panesChanged) {
             this.panes = panes;
           }
         } else if (this.panes.length !== 0) {
@@ -172,6 +173,8 @@
       if (!this.currentName) {
         this.setCurrentName('0');
       }
+
+      this.$on('tabLabelChanged', this.calcPaneInstances.bind(null, true));
     },
 
     mounted() {