Vue.js 递归组件实现树形菜单(实例分享)


Posted in Javascript onDecember 21, 2016

最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单。

项目结构:

Vue.js 递归组件实现树形菜单(实例分享)

main.js 作为入口,很简单:

import Vue from 'vue'
Vue.config.debug = true
import main from './components/main.vue'
new Vue({
 el: '#app',
 render: h => h(main)
})

它引入了一个组件 main.vue:

<template>
 <div class="tree-menu">
 <ul v-for="menuItem in theModel">
 <my-tree :model="menuItem"></my-tree>
 </ul>
 </div>
</template>
<script>
var myData = [
 {
 'id': '1',
 'menuName': '基础管理',
 'menuCode': '10',
 'children': [
 {
 'menuName': '用户管理',
 'menuCode': '11'
 },
 {
 'menuName': '角色管理',
 'menuCode': '12',
 'children': [
 {
 'menuName': '管理员',
 'menuCode': '121'
 },
 {
 'menuName': 'CEO',
 'menuCode': '122'
 },
 {
 'menuName': 'CFO',
 'menuCode': '123'
 },
 {
 'menuName': 'COO',
 'menuCode': '124'
 },
 {
 'menuName': '普通人',
 'menuCode': '124'
 }
 ]
 },
 {
 'menuName': '权限管理',
 'menuCode': '13'
 }
 ]
 },
 {
 'id': '2',
 'menuName': '商品管理',
 'menuCode': ''
 },
 {
 'id': '3',
 'menuName': '订单管理',
 'menuCode': '30',
 'children': [
 {
 'menuName': '订单列表',
 'menuCode': '31'
 },
 {
 'menuName': '退货列表',
 'menuCode': '32',
 'children': []
 }
 ]
 },
 {
 'id': '4',
 'menuName': '商家管理',
 'menuCode': '',
 'children': []
 }
];
import myTree from './common/treeMenu.vue'
export default {
 components: {
 myTree
 },
 data() {
 return {
 theModel: myData
 }
 }
}
</script>

该文件引入了树形组件 treeMenu.vue:

<template>
 <li>
 <span @click="toggle">
 <i v-if="isFolder" class="icon" :class="[open ? 'folder-open': 'folder']"></i>
 <i v-if="!isFolder" class="icon file-text"></i>
 {{ model.menuName }}
 </span>
 <ul v-show="open" v-if="isFolder">
 <tree-menu v-for="item in model.children" :model="item"></tree-menu>
 </ul>
 </li>
</template>
 <script>
export default {
 name: 'treeMenu',
 props: ['model'],
 data() {
 return {
 open: false,
 isFolder: true
 }
 },
 computed: {
 isFolder: function() {
 return this.model.children && this.model.children.length
 }
 },
 methods: {
 toggle: function() {
 if (this.isFolder) {
 this.open = !this.open
 }
 }
 }
}
</script>
 <style>
ul {
 list-style: none;
}
i.icon {
 display: inline-block;
 width: 15px;
 height: 15px;
 background-repeat: no-repeat;
 vertical-align: middle;
}
.icon.folder {
 background-image: url(/src/assets/folder.png);
}
.icon.folder-open {
 background-image: url(/src/assets/folder-open.png);
}
.icon.file-text {
 background-image: url(/src/assets/file-text.png);
}
.tree-menu li {
 line-height: 1.5;
}
</style>

就这么简单。这篇文章还真没什么可写的,权当记录吧。

截图效果如下:

Vue.js 递归组件实现树形菜单(实例分享)

项目代码下载地址:http://xiazai.3water.com/201612/yuanma/caihg-master_3water.rar

 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
详解jQuery选择器
Dec 21 #Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 #Javascript
js实现可输入可选择的select下拉框
Dec 21 #Javascript
详解handlebars+require基本使用方法
Dec 21 #Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 #Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 #Javascript
js querySelector() 使用方法
Dec 21 #Javascript
You might like
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python装饰器的函数式编程详解
2015/02/27 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python3+PyQt5实现柱状图
2018/04/24 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python实现代码统计器
2019/09/19 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
同学聚会邀请函
2015/01/30 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android