fixed bug of menu when use recursive components and set accordion

This commit is contained in:
zhigang.li 2018-06-04 11:45:55 +08:00
parent e549c92b1d
commit 1f7905d450
3 changed files with 14 additions and 4 deletions

View file

@ -44,13 +44,14 @@
<MenuItem name="5-4">Option 12</MenuItem> <MenuItem name="5-4">Option 12</MenuItem>
</Submenu> </Submenu>
</Menu> </Menu>
<!-- <Menu theme="dark" accordion @on-open-change="handleOpenChange"> <br/>
<Menu ref="menu2" theme="dark" accordion :open-names="openNames2" @on-open-change="handleOpenChange">
<template v-for="item in menuList"> <template v-for="item in menuList">
<custem-menu-item v-if="item.children" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item> <custem-menu-item v-if="item.children" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item> <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
</template> </template>
</Menu> </Menu>
<Button @click="addNewItem">添加菜单项</Button> --> <Button @click="addNewItem">添加菜单项</Button>
<Button @click="changeActive">修改激活项</Button> <Button @click="changeActive">修改激活项</Button>
<Button @click="setOpenNames">修改展开数组</Button> <Button @click="setOpenNames">修改展开数组</Button>
<Menu mode="horizontal" theme="light" :active-name="activeName" @on-open-change="hc"> <Menu mode="horizontal" theme="light" :active-name="activeName" @on-open-change="hc">
@ -108,6 +109,7 @@ import custemMenuItem from './custem-menu-item.vue'
data () { data () {
return { return {
openNames: ['1'], openNames: ['1'],
openNames2: [],
menuList: [ menuList: [
{ {
name: '111', name: '111',
@ -184,8 +186,10 @@ import custemMenuItem from './custem-menu-item.vue'
}, },
setOpenNames () { setOpenNames () {
this.openNames = ['2', '3']; this.openNames = ['2', '3'];
this.openNames2 = ['222', '222-222', '222-222-222', '222-222-222-111']
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.menu.updateOpened(); this.$refs.menu.updateOpened();
this.$refs.menu2.updateOpened();
}) })
}, },
addNewItem () { addNewItem () {

View file

@ -79,6 +79,9 @@
updateOpenKeys (name) { updateOpenKeys (name) {
let names = [...this.openedNames]; let names = [...this.openedNames];
const index = names.indexOf(name); const index = names.indexOf(name);
if (this.accordion) findComponentsDownward(this, 'Submenu').forEach(item => {
item.opened = false;
});
if (index >= 0) { if (index >= 0) {
let currentSubmenu = null; let currentSubmenu = null;
findComponentsDownward(this, 'Submenu').forEach(item => { findComponentsDownward(this, 'Submenu').forEach(item => {
@ -87,11 +90,14 @@
item.opened = false; item.opened = false;
} }
}); });
findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => {
item.opened = true;
});
findComponentsDownward(currentSubmenu, 'Submenu').forEach(item => { findComponentsDownward(currentSubmenu, 'Submenu').forEach(item => {
item.opened = false; item.opened = false;
}); });
} else { } else {
if (this.mode === 'horizontal' && this.accordion) { if (this.accordion) {
let currentSubmenu = null; let currentSubmenu = null;
findComponentsDownward(this, 'Submenu').forEach(item => { findComponentsDownward(this, 'Submenu').forEach(item => {
if (item.name === name) { if (item.name === name) {

View file

@ -427,7 +427,7 @@
let initialValue = Array.isArray(value) ? value : [value]; let initialValue = Array.isArray(value) ? value : [value];
if (!multiple && (typeof initialValue[0] === 'undefined' || (String(initialValue[0]).trim() === '' && !Number.isFinite(initialValue[0])))) initialValue = []; if (!multiple && (typeof initialValue[0] === 'undefined' || (String(initialValue[0]).trim() === '' && !Number.isFinite(initialValue[0])))) initialValue = [];
return initialValue.filter((item) => { return initialValue.filter((item) => {
return Boolean(item) || item === 0 return Boolean(item) || item === 0;
}); });
}, },
processOption(option, values, isFocused){ processOption(option, values, isFocused){