页面效果：

如何实现：

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. dedecms_5.7 download.php SQL注入

    最近在看Web渗透与漏洞挖掘,这本书的编写目的感觉非常的不错,把渗透和代码审计结合在一起,但是代码审计部分感觉思路个人认为并不是很清晰,在学习dedecms v5.7 SQL注入的时候就只看懂了漏洞, ...

  2. 高性能JAVA开发之内存管理

    这几天在找一个程序的bug,主要是java虚拟机内存溢出的问题,调研了一些java内存管理的资料,现整理如下: 一.JVM中的对象生命周期 对象的生命周期一般分为7个阶段:创建阶段,应用阶段,不可视阶 ...

  3. IPC之——信号量集(多个信号量)

    如果两个进程不仅需要同步,还要保证先后执行顺序,就要用两个信号量(互斥锁)来解决 //栅栏模型:实现以下框架中的四个子进程 所有进程做完任务后 在一起执行下一次  #include <stdio ...

  4. T-SQL总结

    先简单说一下 SQL是国际组织订的统一标准,各数据库厂商根据该标准开发自己的数据库及语言 T-SQL就是Microsoft公司的 oracle的是PL/SQL 下面我们主要总结T-SQL: 1.T-S ...

  5. html,将元素水平，垂直居中的四种方式

    将元素垂直,水平居中分两种情况:一个是元素尺寸固定,二是元素尺寸不固定 一.尺寸固定 方法1:定位 ,50%,margin负距 .box{ width: 400px; height: 300px; b ...

  6. 企业框架-Spring

    1.什么是Spring Spring是最受欢迎的企业级Java应用程序开发框架,数以百万的来自世界各地的开发人员使用Spring框架来创建性能好.易于测试.可重用的代码. Spring框架是一个开源的 ...

  7. 虚拟网卡 TUN/TAP 驱动程序设计原理（经典）

    盗用-收藏 简介 虚拟网卡Tun/tap驱动是一个开源项目,支持很多的类UNIX平台,OpenVPN和Vtun都是基于它实现隧道包封装.本文将介绍tun/tap驱动的使用并分析虚拟网卡tun/tap驱 ...

  8. 吴裕雄--天生自然HTML学习笔记：HTML <head>

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. drf分页组件补充

    drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...

  10. 【转载】[基础知识]【网络编程】TCP/IP

    转自http://mc.dfrobot.com.cn/forum.php?mod=viewthread&tid=27043 [基础知识][网络编程]TCP/IP iooops  胖友们楼主我又 ...