页面效果：

如何实现：

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. 透过F5获取服务器真实内网IP

    渗透测试过程中,经常会遇到目标服务器使用F5 LTM做负载均衡. 如果能获取到目标服务器的真实IP地址,会给后续渗透带来一定便利. 本文既是最近渗透遇到的一点点经验分享. F5修改cookie机制 F ...

  2. Normally Distributed|

    6.1Introducing Normally Distributed Variables Why the word “normal”? Because, in the last half of th ...

  3. 深入JVM内核--JVM简介

    JVM概念 jvm是指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完成计算机系统. 目前主要有vmMare.visual Box和JVM三款虚拟机. JVM使用软件模拟java字节 ...

  4. java面试题 - 框架

    1.servlet执行流程 客户端发出http请求,web服务器将请求转发到servlet容器,servlet容器解析url并根据web.xml找到相对应的servlet,并将request.resp ...

  5. Protein interaction|insight QUANTA|SYBYL COMPOSER|MODELLER|SWISS_MODEL|WHAT IF|3D-JIGSAW|CPH-ModelGPCRs|Membrane protein|

    生命组学 蛋白质之间的互作可以有以下应用: Eg:改变蛋白质基因,从而组改变结构,削弱蛋白质之间的相互作用. Eg:数据模拟出蛋白质的靶点,即结合腔,将此数据存入结合化合物的dataset,用于制药 ...

  6. Java实用教程系列之对象的转型

    体现: 父类的引用可以指向子类的对象接口的引用可以指向实现类的对象转型: 向上转型由子类类型转型为父类类型,或者由实现类类型转型为接口类型向上转型一定会成功,是一个隐式转换向上转型后的对象,将只能访问 ...

  7. spring和hibernate的集成

    集成关系图: 项目目录树: User.java package com.donghai.bean; public class User { private String id; private Str ...

  8. Redis 中 byte格式 写入、取出

    实体类: package com.nf.redisDemo1.entity; import java.io.Serializable; public class News implements Ser ...

  9. python标准库-calendar 模块

    原文地址:http://www.bugingcode.com/blog/python_calendar.html calendar 模块是python实现的unix 的 cal命令.它可以以标准的模式 ...

  10. <NOIP2005提高T2>过河の思路

    emm又一道dp dp真有趣(你的良心呢?!!! Description 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一 ...