element ui 前台模板_element-ui 菜单模板封装（递归）
1.使用vue-cli后src路径找个文件夹创建menu.vue;
注意：
1.数据需要通过父页面传递进来，在模板中会造成数据溢出
模板需要有name属性，调用模板的父页面的组件名称和模板name需一致，才能实现递归。
//menu.vue;
//循环数据；数据menuList通过props传递
{ { list.resourceName}}
//当有子集数据再次使用这个模板，:menuList通过props传递{ {list.resourceName}}
//循环数据；数据menuList通过props传递 { { list.resourceName}} //当有子集数据再次使用这个模板，:menuList通过props传递 { {list.resourceName}}.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//使用菜单组件
}
}
1.使用vue-cli后src路径找个文件夹创建menu.vue; 注意： 1.数据需要通过父页面传递进来，在模板中会造成数据溢出 模板需要有name属性，调用模板的父页面的组件名称和模板name需一致，才能实现递归。 //menu.vue; //循环数据；数据menuList通过props传递 { { list.resourceName}} //当有子集数据再次使用这个模板，:menuList通过props传递 { {list.resourceName}} .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//使用菜单组件 } }