iview书写多级菜单 menu
新建menu组件：
<template>
<div>
<Menu @on-select='tabopen'>
<MenuItems :menu='menu'></MenuItems>
</Menu>
</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>
新建menuitem组件：
<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',
}
]
}
]
相关文章
