介绍

这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能。

使用方法

由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹SideBar导入到现有项目中即可使用。

工作流程

组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据传递给封装好的菜单组件,菜单组件通过解析数据,完成菜单渲染。

使用示例

 <template>
<div id="app">
<Sidebar :menuList="menuList"/>
</div>
</template>

<script>
import Sidebar from './SideBar/SideBar.vue'
export default {
name: 'app',
components: { Sidebar},
data() {
return {
menuList,
}
}
}
</script>

选项

属性 描述 类型 是否必须
menuList 由后端返回的菜单数据 Array

菜单数据格式示例

 
 {
"menuList" : [
{
"path": "/func1", //菜单项所对应的路由路径
"title": "功能1", //菜单项名称
"children":[] //是否有子菜单,若没有,则为[]
},
{
"path": "/func2",
"title": "功能2",
"children":[]
},
{
"path": "/func3",
"title": "功能3",
"children": [
{
"path": "/func31",
"title": "功能3-1",
"children":[]
},
{
"path": "/func32",
"title": "功能3-2",
"children":[]
},
{
"path": "/func33",
"title": "功能3-3",
"children":[]
},
]
}
]
}

关于如何将数据转化成以上格式,请参考博文树形多级菜单数据源嵌套结构与扁平结构互转

 

效果图

组件代码

完整代码请戳☞Vue-Components-Library/SideBar

(完)

vue+element UI以组件递归方式实现多级导航菜单的更多相关文章

  1. vue+element UI递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  2. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  3. Vue + Element UI 实现权限管理系统(动态加载菜单)

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  4. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  5. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  8. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

随机推荐

  1. SQL SERVER数据库多条件查询

    例如:查询挂号超500的数据select CONVERT(VARCHAR(10),DGH,23),COUNT(*) from yxhis2017..VTBMZGHMX2017 where bth=0 ...

  2. Java工程师学习指南(中级篇)

    Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...

  3. 性能测试:Jmeter压测过程中的短信验证码读取

    问题背景 现如今国内的大部分软件或者网站应用,普遍流行使用短信业务,比如登录.注册以及特定的业务通知等. 对于这些业务,在使用Jmeter进行性能测试的过程中,就会需要自动获取和填入短信验证码,否则性 ...

  4. MySQL基础(四)常用函数

    转载自 http://blog.csdn.net/evankaka MySQL数据库中提供了很丰富的函数.MySQL函数包括数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数. ...

  5. 再谈Transaction——MySQL事务处理分析

    MySQL 事务基础概念/Definition of Transaction 事务(Transaction)是访问和更新数据库的程序执行单元;事务中可能包含一个或多个 sql 语句,这些语句要么都执行 ...

  6. django数据库迁移时候异常

    django数据库迁移时候异常 一.错误信息 Django在根据models生成数据库表时报 init() missing 1 required positional argument: 'on_de ...

  7. 攻防世界(XCTF)WEB(进阶区)write up(二)

    国庆就要莫得了   起床刷几道 NewsCenter mfw Training-WWW-Robots NaNNaNNaNNaN-Batman bug NewsCenter search传参那里发现有注 ...

  8. [Luogu3065][USACO12DEC]第一!First!

    题目描述 Bessie has been playing with strings again. She found that by changing the order of the alphabe ...

  9. 一张图看懂Rxjava的原理

    前言 Rxjava是NetFlix出品的Java框架, 官方描述为 a library for composing asynchronous and event-based programs usin ...

  10. Unity3D 通过JSON查询天气

    一.天气查询API 获取天气信息,首先要找到提供天气数据的接口,我使用的是高德地图免费为我们提供的,网址为 https://lbs.amap.com/api/webservice/guide/api/ ...