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 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 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
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
js实现二级导航功能
2017/03/03 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python单例模式的两种实现方法
2017/08/14 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
最新的互联网创业计划书
2014/01/10 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
建党伟业电影观后感
2015/06/01 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
2022微信温控新功能上线
2022/05/09 数码科技