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 相关文章推荐
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
js计算精度问题小结
2013/04/22 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
python实现线程池的方法
2015/06/30 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python判断完全平方数的方法
2018/11/13 Python
python多线程扫描端口(线程池)
2019/09/04 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
财务学生的职业生涯发展
2014/02/11 职场文书
销售经理竞聘书
2014/03/31 职场文书
高中学生期末评语
2014/04/25 职场文书
党员群众路线承诺书
2014/05/20 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB