1.先上图,下图是最终需要实现的效果。

2.需求:根据后台传来的json,自动生成一二三级导航,因ui设计的一级、二级和三级导航的样式均不一样,所以每级导航的class必须不同(尝试修改antd的左侧导航,但未成功),如一级导航li的class为menu-first,二级li的class为menu-second...。一二三级导航的容器class分别为menu-first-wrap、menu-second-wrap...,最终需要实现的html代码如下
数据管理
3.数据格式如下:
[ {
"name": "一级菜单",
"submenu": [
{
"name": "二级菜单",
"url": ""
},
{
"name": "二级菜单",
"submenu": [
{
"name": "三级菜单",
"submenu": [
{
"name": "四级菜单",
"url": ""
}
]
},
{
"name": "三级菜单",
"url": ""
}
]
},
{
"name": "二级菜单",
"url": ""
},
{
"name": "二级菜单",
"submenu": [
{
"name": "三级菜单",
"submenu": [
{
"name": "四级菜单",
"url": ""
},
{
"name": "四级菜单",
"submenu": [
{
"name": "五级菜单",
"url": ""
},
{
"name": "五级菜单",
"url": ""
}
]
}
]
},
{
"name": "三级菜单",
"url": ""
}
]
},
{
"name": "二级菜单",
"url": ""
}
]
}]
4.请那位大神能够教教我如何写,最主要的就是如何将不同层级的导航item和wrap加上相对应的class就行了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
可以和后端沟通, 加一个字段为level(标识第几级),
现在的数据结构也可以, 自己做一个标识位当前是第几级(方法自己想, 简单),
首先拿到这段json, map:
写一个Menu组件这里有我制作的一个,你可以参看一下Menu组件