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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python发送邮件实例分享
2017/07/28 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
上班迟到检讨书
2014/01/10 职场文书
自荐信写法介绍
2014/01/25 职场文书
进步之星获奖感言
2014/02/22 职场文书
项目经理任命书范本
2014/06/05 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript