fixed bug of menu when use recursive components and set accordion
This commit is contained in:
parent
e549c92b1d
commit
1f7905d450
3 changed files with 14 additions and 4 deletions
|
@ -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 () {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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){
|
||||||
|
|
Loading…
Add table
Reference in a new issue