element ui 前台模板_element-ui 菜单模板封装（递归）

1.使用vue-cli后src路径找个文件夹创建menu.vue;

注意：

1.数据需要通过父页面传递进来，在模板中会造成数据溢出

模板需要有name属性，调用模板的父页面的组件名称和模板name需一致，才能实现递归。

//menu.vue;

.el-menu--collapse span,

.el-menu--collapse i.el-submenu__icon-arrow

{

height: 0;

width: 0;

overflow: hidden;

visibility: hidden;

display: inline-block;

}

export default{

name:'Menu',//模板名称

data(){

return {

}

},

beforeMount(){

},

props:['menuList']

}

2.父页面使用组件；

//template部分

class="el-menu-vertical-demo"

:collapse="isCollapse"

background-color="rgb(73, 80, 96)" //背景颜色：此备注说明用，实际开发需要删除，否则报错

text-color="rgba(255,255,255,0.7)" //字体颜色：此备注说明用，实际开发需要删除，否则报错

unique-opened //只打开一个菜单：此备注说明用，实际开发需要删除，否则报错

>

//script部分

import Menu from './main-components/menu.vue'; //引进菜单模板

import {menudata} from '../data/menu.js'; //菜单数据

export default{

data(){

return {

isCollapse:false,//菜单展开功能

unCollapse:{

width:'220px'

},

collapse:{

width:'50px'

},

unCollapseMain:{

paddingLeft:'220px'

},

collapseMain:{

paddingLeft:'50px'

},

menuList:menudata.obj

}

},

methods:{

toggleClick(){//菜单展开功能

this.isCollapse=!this.isCollapse;

}

},

components:{

Menu//使用菜单组件

}

}