drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change the way to handle submenu collapse when accordion is true

Browse source
This commit is contained in:
zhigang.li 2018-05-15 16:59:53 +08:00
parent b924d14da3
commit 2b24fcceed
7 changed files with 147 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

90
examples/routers/menu.vue
View file

@ -44,14 +44,92 @@
<MenuItem name="5-4">Option 12</MenuItem>
</Submenu>
</Menu>
<!-- <Menu theme="dark" accordion @on-open-change="handleOpenChange">
<template v-for="item in menuList">
<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>
</template>
</Menu>
<Button @click="setOpenNames">修改展开数组</Button>
<Button @click="addNewItem">添加菜单项</Button> -->
</div>
</template>
<script>
import custemMenuItem from './menu-item.vue'
export default {
components: {
custemMenuItem
},
data () {
return {
openNames: ['1']
openNames: ['1'],
menuList: [
{
name: '111',
children: [
{
name: '111-111'
},
{
name: '111-222'
}
]
},
{
name: '222',
children: [
{
name: '222-111'
},
{
name: '222-222',
children: [
{
name: '222-222-111'
},
{
name: '222-222-222',
children: [
{
name: '222-222-222-111'
},
{
name: '222-222-222-222'
}
]
}
]
},
{
name: '222-333',
children: [
{
name: '222-333-111',
children: [
{
name: '222-333-111-111'
},
{
name: '222-333-111-222'
}
]
},
{
name: '222-333-222',
children: [
{
name: '222-333-222-111'
},
{
name: '222-333-222-222'
}
]
}
]
}
]
}
]
};
},
methods: {
@ -63,6 +141,16 @@
this.$nextTick(() => {
this.$refs.menu.updateOpened();
})
},
addNewItem () {
this.menuList[1].children[1].children.push({
name: '222-222-333',
children: [
{
name: '222-222-333-111'
}
]
})
}
}
}