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 相关文章推荐
Javascript获取表单名称(name)的方法
Apr 02 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
JavaScript 接口原理与用法实例详解
May 12 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去除html标记的原生函数详解
2015/01/27 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
用JS实现选项卡
2020/03/23 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python实现名片管理系统
2018/11/29 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Django框架模板用法入门教程
2019/11/04 Python
运动会致辞稿50字
2014/02/04 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
卖房协议书
2014/04/11 职场文书
校园安全标语
2014/06/07 职场文书
单位租房协议范本
2014/12/03 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL