页面效果：

如何实现：

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. ionic 创建服务命令

    创建Util工具库 ionic g provider Util

  2. 数学中的距离distance（未完成）

    manhattan distance(曼哈顿距离) euclidean distance(欧几里得距离) cosine distance(cosine距离) 闵式距离 切比雪夫距离

  3. Object.prototype.toString.call(obj).slice(8,-1)

    1.Object.prototype.toString() 该方法返回描述某个对象数据类型的字符串,如自定义的对象没有被覆盖,则会返回“[object type]”,其中,type则是实际的对象类型. ...

  4. java word另存为word xml格式

    1.jacob-1.15-M3-x86.dll copy到c:\\windows\system32 2.引入jacob.jar 把jacob.dll(不同版本的jacob的dll文件名有所不同)复制到 ...

  5. 基础_1：RCP基本框架

    Display: Display是一个SWT对象,代表底层图形系统的实现.一个RCP应用程序只需要一个Display对象. Display的主要任务是从操作系统队列中读取事件,传递给RCP的事件监听器 ...

  6. [LC] 127. Word Ladder

    Given two words (beginWord and endWord), and a dictionary's word list, find the length of shortest t ...

  7. 转：Zabbix 监控sqlserver

    一:Zabbix监控sqlserver 方法一: 1.思路整理 1.在zabbix server上安装Freetds.unixODBC.unixODBC-devel使其能够访问SQL Server数据 ...

  8. 第十六届“二十一世纪的计算”学术研讨会 牛津大学肿瘤成像学教授Michael Brady主题演讲

    Computing and Healthcare 牛津大学肿瘤成像学教授Michael Brady主题演讲" title="第十六届"二十一世纪的计算"学术研讨 ...

  9. Redis 总结精讲 看一篇成高手系统

    转自:https://blog.csdn.net/hjm4702192/article/details/80518856 本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点 ...

  10. jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV

    jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...