html 左侧 树形菜单,vue左侧菜单,树形图递归实现代码

学习vue有一段时间了,最近使用vue做了一套后台管理系统,左侧菜单需求是这样的,可以多层,数据由后台传递。也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享。

效果图如下所示:

fe791a79ae04e943d8d60eab2e1a58ec.png

先说说遇到的坑,由于是子父组件,当时传递使用的是子父组件的传递,但是这时候只能获取到第一层的数据,第二层往后获取不到数据,踩了一下午坑以后才知道,子组件使用了递归组件,这时候他已经不能往父组件传递了,子传父,只能逐层传递这时候已经隔层了,所以我使用了非子父组件传递,两个页面都引入bus.js,这里不懂的请百度。

bus.js

import Vue from 'vue'

export default new Vue

父组件内容

模拟后台数据

theModel:[{

'id': '1',

'menuName': '导航1',

'menuCode': '10',

'menuUrl':'',

'childMenus': [

{

'menuName': '用户管理',

'menuCode': '11',

'menuUrl':'/home',

'menuPath':'',

'childMenus':[{

'menuName': '11111',

'menuCode': '12',

'menuUrl':'/systemjuri',

'menuPath':'',

'childMenus': []

}]

},

{

'menuName': '角色管理',

'menuCode': '12',

'menuUrl':'/systemjuri',

'menuPath':'',

'childMenus': []

},

{

'menuName': '菜单管理',

'menuUrl':'/systemmenu',

'menuCode': '13',

'menuPath':'http://10.63.195.214:8080/menuManage/html/index_3.html',

'childMenus':[]

}]

},{

'id': '1',

'menuName': '导航2',

'menuCode': '10',

'childMenus':[]

}],

父组件引入子组件

import myTree from './treeMenu.vue'

export default {

components: {

myTree

},

}

父组件接受子组件传递的数据

bus.$on("childEvent", function(transmit) {})

下面是子组件内容,子组件名称treeMenu,name: 'treeMenu',

{{ model.menuName }}

import bus from "./../../../static/js/bus";

export default {

name: 'treeMenu',

props: ['model'],

data() {

return {

open: false,

}

},

computed: {

isFolder() {

return this.model.childMenus && this.model.childMenus.length

}

},

methods: {

toggle(msg,menuUrl,menuPath) {

if (this.isFolder) {

this.open = !this.open

}

var json = { msg: msg, menuUrl: menuUrl,menuPath:menuPath };

bus.$emit("childEvent", json)

},

}

}

ul {

list-style: none;

}

i.icon {

display: inline-block;

width: 15px;

height: 15px;

background-repeat: no-repeat;

vertical-align: middle;

float: right;

margin-top: 17px;

margin-right:30px;

}

.icon.folder {

background-image: url('./homeimg/left_1.png');

}

.icon.folder-open {

background-image: url('./homeimg/dowm_1.png');

}

.icon.file-text {

}

ul li ul li .icon.folder {

background-image: url('./homeimg/left_2.png');

}

ul li ul li .icon.folder-open {

background-image: url('./homeimg/down_2.png');

}

.tree-menu li {

line-height: 50px;

}

span{

display: block;

width: 100%;

height: 100%;

}

ul{

padding-left:10px;

}

ul li span{

text-indent: 10px;

}

ul li ul{

background:#ebf1f8;

color:#1457a7;

}

li:hover{

cursor:pointer;

}

由于用了递归组件所以name需要和对应起来

总结

以上所述是小编给大家介绍的vue左侧菜单,树形图递归实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于Istio 1.1,你所不知道的细节

本文整理自Istio社区成员Star在 Cloud Native Days China 2019 北京站的现场分享 第1则 主角 Istio Istio作为service mesh领域的明星项目,从2016年发布到现在热度不断攀升。 Istio & Envoy Github Star Growth 官网中Istio1.1的架构图除了数据面的Envoy和控制面…

2021吉林高考26日几点可以查询成绩,2021吉林高考成绩查分时间及入口

2021吉林高考成绩查分时间及入口2021吉林高考成绩查分时间及入口,有一些高考生真的很积极,考完试当天就将答案给对好了,考试嘛,站在旁观者的角度来看总是有人欢喜有人忧。估出来分数不咋地的,整个六月就毁了。2021吉林…

easyui,layui和 vuejs 有什么区别

2019独角兽企业重金招聘Python工程师标准>>> easyui是功能强大但是有很多的组件使用功能是十分强大的,而layui是2016年才出来的前端框架,现在才更新到2.x版本还有很多的功能没有完善,也还存在一些不稳定的情况,但是lay…

广东2021高考成绩位次查询,广东一分一段表查询2021-广东省2021年一分一段统计表...

广东省高考一分一段表是同学们在填报高考志愿时的重要参考资料之一。根据一分一段表,大家不仅可以清楚地了解自己的高考成绩在全省的排名,还可以结合心仪的大学近3年在广东省的录取位次变化,判断出自己被录取的概率大概是多少。根据考试院公布…

PAKDD 2019 都有哪些重要看点?看这篇文章就够了!...

雷锋网 AI 科技评论按:亚太地区知识发现与数据挖掘国际会议(Pacific Asia Knowledge Discovery and Data Mining,PAKDD)是亚太地区数据挖掘领域的顶级国际会议,旨在为数据挖掘相关领域的研究者和从业者提供一个可自由 …

大学计算机基础书本里的毕业论文源稿,计算机基础毕业论文范文

计算机基础毕业论文范文导语:关于大学计算机基础的教学,需要不断探索与实践,实现更好的教学。下面是小编带来的计算机基础毕业论文,欢迎阅读与参考。论文:大学计算机基础教学的探索与实践摘要:大学计算机基…

计算机技术基础 VB 答案,《计算机技术基础(VB)》武汉理工大学20春作业一

计算机技术基础(VB)_作业一1.[判断题] 写在一行上的多条语句,应以逗号作为分隔符。奥鹏作业答案可以联系QQ 761296021A.正确B.错误正确答案:——B——2.[判断题] 滚动条的最小值、最大值、最小变动值、最大变动值属性均可自行设计。A.正确B.错误正确答案:——A——3…

Spring MVC 实现Excel的导入导出功能(2:Excel的导入优化和Excel的导出)

Excel的导入V2优化版 有些时候文件上传这一步骤由前端来处理,只将上传后的 URL 传输给后端(可以参考上一文中的图片上传功能),也就是导入请求中并不会直接处理 MultipartFile 对象,而是通过文件 URL 将其下载&#xff…

华为智能手环智能手表软件测试,一块智能手表的测试之旅,揭秘华为运动健康科学实验室...

随着消费者对健康生活的日益关注,随之而来的是智能可穿戴设备的蓬勃发展。一个手环,一个智能手表,都可以为消费者提供诸如心率,步数相关的数据统计。而更进阶的设备,则能为用户提供系统的运动解决方案以及监控人体健康…

软件测试都有哪些证书,软件测试都有哪些证书呀?有用吗?

OYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学习论坛 www.oywp.netOYWP学…

超低频测试信号产生电路软件流程图,一种0_20Hz超低频信号发生器的设计与实现...

。。第22卷第4期增刊           仪 器 仪 表 学 报             2001年8月一种0~20Hz超低频信号发生器的设计与实现马彦恒 郭 利 于久恩 (军械工程学院 石家庄 050003)摘要 本文介绍了一种采用了主—从式双CPU结构,频率和幅度都…

datastage 使用小结

转载于:https://www.cnblogs.com/Guhan-xue/p/10758663.html

Teams 的逻辑架构与语音解决方案 - Official Posters Download

意外收获了前几天(0420)刚刚更新出来的Teams架构海报,分享给大家下载 Microsoft Teams IT architecture and telephony solutions postershttps://docs.microsoft.com/en-us/microsoftteams/teams-architecture-solutions-posters 接下来跟大…

ifix怎么装服务器系统上,ifix服务器和客户端配置

ifix服务器和客户端配置 内容精选换一换准备好服务端和客户端,根据组网规划完成物理服务器的物理组网。本文档中以3台客户端和3台TaiShan服务器作为服务端为例。本次部署流程中以3台客户端节点和3台TaiShan 200 服务器(型号2280)作为存储节点,网络包含前…

接口测试工具Postman(转)

接口测试工具Postman Postman是一款功能强大的HTTP调试与模拟插件,不仅可以调试简单的CSS、HTML、脚本等网页的基本信息,它还可以发送几乎所有类型的HTTP请求。Postman适用于不同的操作系统,Mac、WindowsX32、Windows X64、Linux系统等。本篇…

洛谷 P1372 又是毕业季I

可能所有的数论题都是这样玄学.... 题目链接:https://www.luogu.org/problemnew/show/P1372 这道题通过暴力的枚举可以发现是不可做的(当然我也不会做) 然后就有了这样一个思路: 这道题就是求:从1~n中取k个数&#xff…

在线图表编辑工具 draw.io 10.6.5 版本发布

draw.io 10.6.5 版本已发布,draw.io 是一款在线图表编辑工具, 可以用来编辑工作流、BPM、org charts、UML、ER图、网络拓朴图等。 新版本更新内容如下: 修复 VSDX 导入的类型变体逻辑 (style variation logic) 同一天发布的 10.6.…

用户态与内核态 文件流与文件描述符 简介【转】

转自:https://www.cnblogs.com/Jimmy1988/p/7479856.html 用户态和内核态 程序代码的依赖和调用关系如下图所示: Lib:标准ASCI C函数,几乎所有的平台都支持该库函数,因此依赖该库的程序可移植性好;System F…

趣图:当我捕获Bug的时候

2019独角兽企业重金招聘Python工程师标准>>> 趣图:当我以为已捕获了所有可能的异常...的时候 趣图:程序员调 Bug 的感觉,就是这样的 转载于:https://my.oschina.net/javafirst/blog/3042724

PowerDesigner15连接Oracle数据库并导出Oracle的表结构

PowerDesigner连接Oracle数据库,根据建立的数据源进行E-R图生成。详细步骤如下: 1、启动PowerDesigner 2、菜单:File->Reverse Engineer ->Database 出来New Physical Data Model对话框,DBMS选择ORACLE Version 10g 选项,其他可以选择默…