github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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
pull/14844/head
Akshay Jat 2019-03-25 16:51:51 +05:30 committed by hetech
parent 362953ef4e
commit 9736448b54
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tabs/src/tab-pane.vue
View File

@ -51,7 +51,7 @@
watch: { watch: {
label() { label() {
this.$parent.$forceUpdate(); this.$parent.$emit('tabLabelChanged');
} }
} }
}; };

7
packages/tabs/src/tabs.vue
View File

@ -55,13 +55,14 @@
}, },
methods: { methods: {
calcPaneInstances() { calcPaneInstances(isLabelUpdated = false) {
if (this.$slots.default) { if (this.$slots.default) {
const paneSlots = this.$slots.default.filter(vnode => vnode.tag && const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane'); vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');
// update indeed // update indeed
const panes = paneSlots.map(({ componentInstance }) => componentInstance); 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; this.panes = panes;
} }
} else if (this.panes.length !== 0) { } else if (this.panes.length !== 0) {
@ -172,6 +173,8 @@
if (!this.currentName) { if (!this.currentName) {
this.setCurrentName('0'); this.setCurrentName('0');
} }
this.$on('tabLabelChanged', this.calcPaneInstances.bind(null, true));
}, },
mounted() { mounted() {