iview书写多级菜单 menu
首页 > >    作者:lininn   2021年3月17日 17:59 星期三   热度:136°   百度已收录  
时间:2021-3-17 17:59   热度:136° 

新建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',
                        
                        }
                        ]
                    }

                ]


二维码加载中...
本文作者:lininn      文章标题: iview书写多级菜单 menu
本文地址:?post=505
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn