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


Posted in Javascript onAugust 24, 2018

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

效果图如下所示:

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

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

bus.js

import Vue from 'vue'
export default new Vue

父组件内容

<ul v-for="menuItem in theModel">
<my-tree :model="menuItem"></my-tree>
</ul>

模拟后台数据

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',

<template>
<li>
<span @click="toggle(model.menuName,model.menuUrl,model.menuPath)">
<i v-if="!isFolder" class="icon file-text">●</i>
{{ model.menuName }}
<i v-if="isFolder" class="icon" :class="[open ? 'folder-open': 'folder']"></i>
</span>
<ul v-show="open" v-if="isFolder">
<tree-menu v-for="item in model.childMenus" :model="item" :key="item.menuId"></tree-menu>
</ul>
</li>
</template>
<script>
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)
},
}
}
</script>
<style>
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;
}
</style>

由于用了递归组件所以name需要和<tree-menu>对应起来

总结

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

Javascript 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
原生js简单实现放大镜特效
May 16 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
element-ui中的select下拉列表设置默认值方法
Aug 24 #Javascript
vue 登录滑动验证实现代码
Aug 24 #Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 #Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 #Javascript
element-ui表格数据转换的示例代码
Aug 24 #Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 #Javascript
You might like
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php公用函数列表[正则]
2007/02/22 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
python pip如何手动安装二进制包
2020/09/30 Python
部队万能检讨书
2014/02/20 职场文书
付款委托书范本
2014/04/04 职场文书
销售个人求职信范文
2014/04/28 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
职务说明书范文
2014/05/07 职场文书
如何写求职信
2014/05/24 职场文书
五一劳动节活动总结
2015/02/09 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
高中数学教学反思范文
2016/02/18 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
基于docker安装zabbix的详细教程
2022/06/05 Servers