页面效果：

如何实现：

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的动态菜单的实现的更多相关文章

  1. ant design pro （八）构建和发布

    一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...

  2. ant design pro（二）布局

    一.概述 参看地址:https://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框 ...

  3. Ant Design Pro快速入门

    在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...

  4. 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（三）

    前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...

  5. 初探ant design pro

    1.增加路由子页面&配置菜单 因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析.按照如下的步骤做即可 PS.如果想要给菜单 ...

  6. 使用ant design pro搭建项目

    脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-proje ...

  7. 轻松玩转Ant Design Pro一

    ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件.ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的, ...

  8. ant design pro超详细入门教程

    1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...

  9. Ant Design Pro （中后台系统）教程

    一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么:  https://www.cnblogs ...

  10. Ant Design Pro 学习笔记：数据流向

    在讲这个问题之前,有一个问题应当讲一下: Ant Design Pro / umi / dva 是什么关系? 首先是 umi / dva 的关系. umi 是一个基于路由的 react 开发框架. d ...

随机推荐

  1. CPU内核、用户模式

    本文由是阅读该文章做下的笔记. CPU分内核与用户模式. 三言蔽之 内核模式下,应用可以直接存取内存,能够执行任何CPU指令.一般来说驱动运行在该模式下.内核模式的应用一旦崩溃,整个操作系统都会崩溃. ...

  2. 使用VSCode调试Javascript的三种方式

    Code Runner 在应用商店中搜索Code Runner插件进行安装. 选中你要执行的Javascript脚本,右键选择Run Code,利用Console.log在下方的输出窗口里可以看到输出 ...

  3. deeplearning.ai 序列模型 Week 1 RNN（Recurrent Neural Network）

    1. Notations 循环序列模型的输入和输出都是时间序列.$x^{(i)<t>}$表示第$i$个输入样本的第$t$个元素,$T_x^{(i)}$表示输入的第$i$个样本的元素个数:$ ...

  4. Markdown 语法手册

    1. 斜体和粗体 使用 和 * 表示斜体和粗体. 示例: 这是 斜体,这是 粗体. 2. 分级标题 使用 === 表示一级标题,使用 - 表示二级标题. 示例: 1234567 这是一个一级标题=== ...

  5. python爬虫心得（第一天）

    爬虫是什么? 我个人觉得用简单通俗的话来说就是在浏览网页的过程中将有价值的信息下载到本地硬盘或者是储存到数据库中的行为. 爬虫的基础认知 可以参考此链接:https://www.imooc.com/a ...

  6. 【React.js小书】动手实现 React-redux（五）：Provider - 方志

    我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151 ...

  7. C语言学习笔记之动态分配数组空间

    本文为原创文章,转载请标明出处 高级语言写多了,再拿起C语言的时候,自己已经傻了... C语言中数组大小不能为变量,即使这个变量已经被赋过值了,应该使用malloc方法进行数组空间动态分配. 如下: ...

  8. C语言标准库 常用函数说明

    void *memset(void *str, int c, size_t n) Syntax void *memset(void *str, int c, size_t n) Description ...

  9. 第一次提交本地代码到github上

    上传本地项目到github: 一.SSH方式 配置ssh 进入你要上传项目中的文件夹 1)先配置ssh,输入 ssh-keygen -t rsa -C "your_email@example ...

  10. Java web期末项目第一阶段成果发表

    摘要 我们做的系统是一个基于Java web与MySQL的食堂订餐系统 班级: 计科二班 小组成员:李鉴宣.袁超 我们的第一阶段主要完成以下三件事: 完成项目的需求分析 完成项目的领域逻辑(domai ...