使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了。
{{obj.title}}
{{obj1.title}}
{{obj2.title}}
level-one{
text-indent: 1em;
}
level-two{
text-indent: 2em;
}
level-three{
text-indent: 3em;
}
bar1:[
/所有第一级菜单/
{
title:'一级菜单(1)',id:1,//选项的唯一ID
parentId:0,//父级的ID
level:1 //所处的层级
},{
title:'一级菜单(2)',id:2,parentId:0,level:1
},{
title:'一级菜单(3)',id:3,level:1,},/所有二级菜单/
{
title:'二级菜单(1.1)',id:4,parentId:1,level:2
},{
title:'二级菜单(1.2)',id:5,{
title:'二级菜单(2.1)',id:6,parentId:2,{
title:'二级菜单(2.2)',id:7,/所有三级菜单/
{
title:'三级菜单(1.1.1)',id:8,parentId:4,level:3
},{
title:'三级菜单(1.1.2)',id:9,level:3
}
]