Ant-design-pro的动态菜单的实现
页面效果:
文章图片
如何实现:
1:分别建立SiderMenu和SubMenu组件
2、去and-desingn-vue的官方文档里copy单文件递归菜单的代码https://www.antdv.com/components/menu-cn/#components-menu-demo-single-file-recursive-menu
将代码拷贝到SiderMenu组件中。
3、将https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue里的代码拷贝进SubMenu组件中
4、事先确定好了路由以及数据格式。
5、在siderMenu中定义好遍历路由的方法(通过递归以及字段的验证来返回需要显示的菜单与其下的所有子菜单)
文章图片
SiderMenu的Templete:
文章图片
SubMenu的截图:
文章图片
【Ant-design-pro的动态菜单的实现】
推荐阅读
- 《观后感》
- 每日优鲜|抢菜贩生计的互联网公司,凉了
- 运动|陆冲爆火背后:入门就砸4000元,“奔四”的人也追捧
- {调取该文章的TAG关键词}|下沉市场增势强劲,红旗连锁营收净利双增|看财报
- 痞子衡嵌入式(聊聊i.MXRT1170双核下不同GPIO组的访问以及中断设计)
- java|关于微信小程序与Java后台交互数据中中文乱码问题的讨论
- PHP毕设含lunwen|含文档+PPT+源码等]精品基于PHP实现的好物优购商城|电商小程序[包运行成功]计算机毕业设计PHP毕业设计项目源码计算机PHP毕业设计微信小程序
- 卷积|何恺明大神新作(一种用于目标检测的主流ViT架构,效果SOTA)
- 电影史上最意味深长的一个回眸,煽了我们所有人一耳光
- 在一个群里,你认为哪些行为很受欢迎(哪些行为不受欢迎?在人数众多的社群,你如何获得关键信息)