iview书写多级菜单 menu
Others 2021-03-17 09:59:26 2021-03-17 09:59:26 1553 次浏览新建menu组件:
<template> <div> <Menu @on-select='tabopen'> <MenuItems :menu='menu'></MenuItems> </Menu>新建menuitem组件:</div>
</template> <script> import MenuItems from './menuItem' export default { name:'Menus', props:{ menu:{ type:Array, require:true } }, components:{ MenuItems }, methods:{ tabopen(e){ this.$emit('on-select',e) } }
} </script>
<template> <span> <Submenu :name="item.name" v-for="(item,index) in menu" :key="index"> <template slot="title"> <Icon type="ios-paper" /> {{item.title}} </template> <span v-for="(val,key) in item.children" :key="key" > <MenuItem :name="val.name">{{val.title}}</MenuItem> <my-tree v-if="val.children" :menu='val.children'></my-tree> </span>调用组件:</Submenu>
</span>
</template> <script>
export default { name: "myTree", props:{ menu:{ type:Array, require:true } }
}
</script>
<Menus :menu="menu" @on-select='operation' />
menu:[
{
name:'1',
title:'内容管理',
children:[{
title:'文章管理',
name:'1-1'
}]
},
{
name:'2',
title:'用户管理',
children:[{
name:'2-1',
title:'新增用户',
children:[{
title:'test',
name:'2-1-1',
children:[
{
name:'2-1-1',
title:'lininn'
}
]
}]
},
{
title:'活跃用户',
name:'2-2',
}
]
}
]
Links: 505