mirror of https://github.com/ElemeFE/element
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 reviewpull/14844/head
parent
362953ef4e
commit
9736448b54
|
@ -51,7 +51,7 @@
|
|||
|
||||
watch: {
|
||||
label() {
|
||||
this.$parent.$forceUpdate();
|
||||
this.$parent.$emit('tabLabelChanged');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in New Issue