mirror of https://github.com/ElemeFE/element
feat(Menu): rerender activeIndex when menus changed, fixed #9092
parent
11d2263678
commit
63fed345e5
|
@ -130,26 +130,29 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
defaultActive(value) {
|
defaultActive: 'updateActiveIndex',
|
||||||
const item = this.items[value];
|
|
||||||
if (item) {
|
|
||||||
this.activeIndex = item.index;
|
|
||||||
this.initOpenedMenu();
|
|
||||||
} else {
|
|
||||||
this.activeIndex = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
defaultOpeneds(value) {
|
defaultOpeneds(value) {
|
||||||
if (!this.collapse) {
|
if (!this.collapse) {
|
||||||
this.openedMenus = value;
|
this.openedMenus = value;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
collapse(value) {
|
collapse(value) {
|
||||||
if (value) this.openedMenus = [];
|
if (value) this.openedMenus = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
updateActiveIndex() {
|
||||||
|
const item = this.items[this.defaultActive];
|
||||||
|
if (item) {
|
||||||
|
this.activeIndex = item.index;
|
||||||
|
this.initOpenedMenu();
|
||||||
|
} else {
|
||||||
|
this.activeIndex = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
getMigratingConfig() {
|
getMigratingConfig() {
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
|
@ -287,6 +290,7 @@
|
||||||
if (this.mode === 'horizontal') {
|
if (this.mode === 'horizontal') {
|
||||||
new Menubar(this.$el); // eslint-disable-line
|
new Menubar(this.$el); // eslint-disable-line
|
||||||
}
|
}
|
||||||
|
this.$watch('items', this.updateActiveIndex);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -329,4 +329,37 @@ describe('Menu', () => {
|
||||||
}, true);
|
}, true);
|
||||||
expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一');
|
expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一');
|
||||||
});
|
});
|
||||||
|
it('dynamic menus, issue 9092', done => {
|
||||||
|
vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-menu :default-active="active">
|
||||||
|
<el-menu-item
|
||||||
|
v-ref="menus"
|
||||||
|
v-for="menu in menus"
|
||||||
|
:index="menu.name"
|
||||||
|
:key="menu.name">
|
||||||
|
{{menu.description}}
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: '',
|
||||||
|
menus: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
setTimeout(_ => {
|
||||||
|
vm.active = '2';
|
||||||
|
vm.menus = [
|
||||||
|
{name: '1', description: 'happy'},
|
||||||
|
{name: '2', description: 'new'},
|
||||||
|
{name: '3', description: 'year'}
|
||||||
|
];
|
||||||
|
setTimeout(_ => {
|
||||||
|
expect(vm.$el.querySelector('.el-menu-item.is-active').innerText).to.equal('new');
|
||||||
|
done();
|
||||||
|
}, 20);
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue