回调形成树形结构tree
- //Tree.vue
- <template>
- <li>
- <span @click="toggle">
- <i v-if="isFolder" class="el-icon-error" :class="[open ? 'folder-open': 'folder']"></i>
- <i v-if="!isFolder" class="icon el-icon-success"></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: true,
- }
- },
- computed: {
- isFolder: function () {
- return this.model.children && this.model.children.length//如果有children就isFolder=true,然后就展示循环遍历自己的树tree结构;
- }
- },
- 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;
- }
- .tree-menu li {
- line-height: 1.5;
- }
- </style>
- //views/tree/index.vue
- <template>
- <div class="tree-menu">
- <ul v-for="menuItem in theModel">
- <tree-menu :model="menuItem"></tree-menu>
- </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',
- 'children': [
- {
- 'menuName': '管理员',
- 'menuCode': '121'
- },
- {
- 'menuName': 'CEO',
- 'menuCode': '122'
- },
- {
- 'menuName': 'CFO',
- 'menuCode': '123'
- },
- {
- 'menuName': 'COO',
- 'menuCode': '124'
- },
- {
- 'menuName': '普通人',
- 'menuCode': '124'
- }
- ]
- },
- {
- '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 treeMenu from '../../components/Tree/Tree'
- export default {
- components: {
- treeMenu,
- },
- data() {
- return {
- theModel: myData
- }
- }
- }
- </script>
回调形成树形结构tree的更多相关文章
- EasyUI之树形结构tree
转自:https://blog.csdn.net/ya_1249463314/article/details/70305730 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- C# EasyUI树形结构权限管理模块
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本节和大家探讨下C#使用EasyUI树形结构/Tree构 ...
- Linux查看目录树形结构
安装tree. yum -y install tree 查看是否安装成功 yum list installed tree 执行tree命令查看目录树形结构 tree
- 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
- Linux/Ubuntu tree 命令以树形结构显示文件夹目录结构
1.安装命令工具 sudo apt-get -y install tree 2.可以查看关于tree命令的帮助信息 $ tree --help usage: tree [-adfghilnpqrstu ...
- 【转】linux tree命令以树形结构显示文件目录结构 ---- 不错
原文网址:http://jingyan.baidu.com/article/acf728fd19c7eff8e510a3eb.html 今天小编来给分享Linux 系统下一个非常有用的命令的使用:tr ...
- Tree 树形结构
一.树的基本概念 (1)树(Tree)的概念:树是一种递归定义的数据结构,是一种重要的非线性数据结构. 树可以是一棵空树,它没有任何的结点:也可以是一棵非空树,至少含有一个结点. (2)根(Root) ...
- [转帖]linux tree命令--显示目录的树形结构
linux tree命令--显示目录的树形结构 版权声明:iamqilei@qq.com https://blog.csdn.net/u011729865/article/details/533 ...
- salesforce 零基础学习(七十)使用jquery tree实现树形结构模式
项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...
随机推荐
- SetWindowsHookEx 钩子
基本介绍 钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的.当消息到达后,在目标窗口处理函数之前处理 ...
- Js判断出生年月填写的 是否正确
var r = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29 ...
- Codevs3008 加工生产调度
题目大意:某工厂收到了n个产品的订单,这n个产品分别在A.B两个车间加工,而且必须先在A车间加工后才干够到B车间加工. 求如何安排这n个产品的加工顺序.才干使总的加工时间最短. 这里所说的加工时间是指 ...
- c-fmt-fn标签用法
c-fmt-fn标签用法 CreateTime--2017年1月6日15:48:43 Author:Marydon 一.参考链接 http://blog.csdn.net/fmwind/artic ...
- Cannot load supported formats: Cannot run program "svn"
Cannot load supported formats: Cannot run program "svn" CreateTime--2018年4月26日11:32:37 A ...
- SettingsEclipse&MyEclipse
eclipse优化 迁移时间--2017年5月20日09:39:16 CreateTime--2016年11月18日11:27:02 Author:Marydon ModifyTime--2017 ...
- webservice系统学习笔记10-使用jax-ws创建基于tomcat类型的容器的ws服务
1.在web-info目录下新建目录wsdl 2.在1步的目录下 新建文件user.wsdl <?xml version="1.0" encoding="UTF-8 ...
- 用 Qt Creator 开发非 Qt 的 C/C++ 程序
在Windows还是习惯用VS2005但是现在到了Linux下,开发起来C/C++程序就没有那么得心应手的IDE了.虽然很多人推荐E开头那个主要作为Java开发的IDE,不过安上插件后感觉不大好,一个 ...
- Android网络开发之WIFI
WIFI全称Wireless Fidelity, 又称802.11b标准.WIFI联盟成立于1999年,当时的名称叫做Wireless Ethernet Compatibility Alliance( ...
- ASP.NET#命名空间"System.Data"中不存在类型或命名空间名称"Linq"(是否缺少程序集引用?)
添加完.dbml(LINQ to SQL类文件)文件后,双击.designer.cs源文件时,发现编译器提示:命名空间"System.Data"中不存在类型或命名空间名称" ...