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 api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
HTML的select控件美化
Mar 27 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
redux.js详解及基本使用
May 24 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
详解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 mysql数据库操作类
2008/06/04 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
在Python中使用模块的教程
2015/04/27 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python 内置函数汇总详解
2019/09/16 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python 实现return返回多个值
2019/11/19 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python之字典对象的几种创建方法
2020/09/30 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
商场消防演习方案
2014/02/12 职场文书
财务审计整改报告
2014/11/06 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
redis限流的实际应用
2021/04/24 Redis
pytorch中[..., 0]的用法说明
2021/05/20 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python