1. //Tree.vue
  2. <template>
  3. <li>
  4. <span @click="toggle">
  5. <i v-if="isFolder" class="el-icon-error" :class="[open ? 'folder-open': 'folder']"></i>
  6. <i v-if="!isFolder" class="icon el-icon-success"></i>
  7. {{ model.menuName }}
  8. </span>
  9. <ul v-show="open" v-if="isFolder">
  10. <tree-menu v-for="item in model.children" :model="item"></tree-menu>
  11. </ul>
  12. </li>
  13. </template>
  14. <script>
  15. export default {
  16. name: 'treeMenu',
  17. props: ['model'],
  18. data() {
  19. return {
  20. open: true,
  21. }
  22. },
  23. computed: {
  24. isFolder: function () {
  25. return this.model.children && this.model.children.length//如果有children就isFolder=true,然后就展示循环遍历自己的树tree结构;
  26. }
  27. },
  28. methods: {
  29. toggle: function () {//切换关闭,展开,
  30. if (this.isFolder) {
  31. this.open = !this.open
  32. }
  33. }
  34. }
  35. }
  36. </script>
  37. <style>
  38. ul {
  39. list-style: none;
  40. }
  41. i.icon {
  42. display: inline-block;
  43. width: 15px;
  44. height: 15px;
  45. background-repeat: no-repeat;
  46. vertical-align: middle;
  47. }
  48. .tree-menu li {
  49. line-height: 1.5;
  50. }
  51. </style>
  52.  
  53. //views/tree/index.vue
  54. <template>
  55. <div class="tree-menu">
  56. <ul v-for="menuItem in theModel">
  57. <tree-menu :model="menuItem"></tree-menu>
  58. </ul>
  59. </div>
  60. </template>
  61. <script>
  62. var myData = [
  63. {
  64. 'id': '1',
  65. 'menuName': '基础管理',
  66. 'menuCode': '10',
  67. 'children': [
  68. {
  69. 'menuName': '用户管理',
  70. 'menuCode': '11'
  71. },
  72. {
  73. 'menuName': '角色管理',
  74. 'menuCode': '12',
  75. 'children': [
  76. {
  77. 'menuName': '管理员',
  78. 'menuCode': '121'
  79. },
  80. {
  81. 'menuName': 'CEO',
  82. 'menuCode': '122',
  83. 'children': [
  84. {
  85. 'menuName': '管理员',
  86. 'menuCode': '121'
  87. },
  88. {
  89. 'menuName': 'CEO',
  90. 'menuCode': '122'
  91. },
  92. {
  93. 'menuName': 'CFO',
  94. 'menuCode': '123'
  95. },
  96. {
  97. 'menuName': 'COO',
  98. 'menuCode': '124'
  99. },
  100. {
  101. 'menuName': '普通人',
  102. 'menuCode': '124'
  103. }
  104. ]
  105. },
  106. {
  107. 'menuName': 'CFO',
  108. 'menuCode': '123'
  109. },
  110. {
  111. 'menuName': 'COO',
  112. 'menuCode': '124'
  113. },
  114. {
  115. 'menuName': '普通人',
  116. 'menuCode': '124'
  117. }
  118. ]
  119. },
  120. {
  121. 'menuName': '权限管理',
  122. 'menuCode': '13'
  123. }
  124. ]
  125. },
  126. {
  127. 'id': '2',
  128. 'menuName': '商品管理',
  129. 'menuCode': ''
  130. },
  131. {
  132. 'id': '3',
  133. 'menuName': '订单管理',
  134. 'menuCode': '30',
  135. 'children': [
  136. {
  137. 'menuName': '订单列表',
  138. 'menuCode': '31'
  139. },
  140. {
  141. 'menuName': '退货列表',
  142. 'menuCode': '32',
  143. 'children': []
  144. }
  145. ]
  146. },
  147. {
  148. 'id': '4',
  149. 'menuName': '商家管理',
  150. 'menuCode': '',
  151. 'children': []
  152. }
  153. ];
  154. import treeMenu from '../../components/Tree/Tree'
  155. export default {
  156. components: {
  157. treeMenu,
  158. },
  159. data() {
  160. return {
  161. theModel: myData
  162. }
  163. }
  164. }
  165. </script>

回调形成树形结构tree的更多相关文章

  1. EasyUI之树形结构tree

    转自:https://blog.csdn.net/ya_1249463314/article/details/70305730 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  2. C# EasyUI树形结构权限管理模块

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本节和大家探讨下C#使用EasyUI树形结构/Tree构 ...

  3. Linux查看目录树形结构

    安装tree. yum -y install tree 查看是否安装成功 yum list installed tree 执行tree命令查看目录树形结构 tree

  4. 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件

    看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...

  5. Linux/Ubuntu tree 命令以树形结构显示文件夹目录结构

    1.安装命令工具 sudo apt-get -y install tree 2.可以查看关于tree命令的帮助信息 $ tree --help usage: tree [-adfghilnpqrstu ...

  6. 【转】linux tree命令以树形结构显示文件目录结构 ---- 不错

    原文网址:http://jingyan.baidu.com/article/acf728fd19c7eff8e510a3eb.html 今天小编来给分享Linux 系统下一个非常有用的命令的使用:tr ...

  7. Tree 树形结构

    一.树的基本概念 (1)树(Tree)的概念:树是一种递归定义的数据结构,是一种重要的非线性数据结构. 树可以是一棵空树,它没有任何的结点:也可以是一棵非空树,至少含有一个结点. (2)根(Root) ...

  8. [转帖]linux tree命令--显示目录的树形结构

    linux tree命令--显示目录的树形结构    版权声明:iamqilei@qq.com https://blog.csdn.net/u011729865/article/details/533 ...

  9. salesforce 零基础学习(七十)使用jquery tree实现树形结构模式

    项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...

随机推荐

  1. SetWindowsHookEx 钩子

    基本介绍 钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的.当消息到达后,在目标窗口处理函数之前处理 ...

  2. 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 ...

  3. Codevs3008 加工生产调度

    题目大意:某工厂收到了n个产品的订单,这n个产品分别在A.B两个车间加工,而且必须先在A车间加工后才干够到B车间加工. 求如何安排这n个产品的加工顺序.才干使总的加工时间最短. 这里所说的加工时间是指 ...

  4. c-fmt-fn标签用法

      c-fmt-fn标签用法 CreateTime--2017年1月6日15:48:43 Author:Marydon 一.参考链接 http://blog.csdn.net/fmwind/artic ...

  5. Cannot load supported formats: Cannot run program "svn"

      Cannot load supported formats: Cannot run program "svn" CreateTime--2018年4月26日11:32:37 A ...

  6. SettingsEclipse&MyEclipse

      eclipse优化 迁移时间--2017年5月20日09:39:16 CreateTime--2016年11月18日11:27:02 Author:Marydon ModifyTime--2017 ...

  7. webservice系统学习笔记10-使用jax-ws创建基于tomcat类型的容器的ws服务

    1.在web-info目录下新建目录wsdl 2.在1步的目录下 新建文件user.wsdl <?xml version="1.0" encoding="UTF-8 ...

  8. 用 Qt Creator 开发非 Qt 的 C/C++ 程序

    在Windows还是习惯用VS2005但是现在到了Linux下,开发起来C/C++程序就没有那么得心应手的IDE了.虽然很多人推荐E开头那个主要作为Java开发的IDE,不过安上插件后感觉不大好,一个 ...

  9. Android网络开发之WIFI

    WIFI全称Wireless Fidelity, 又称802.11b标准.WIFI联盟成立于1999年,当时的名称叫做Wireless Ethernet Compatibility Alliance( ...

  10. ASP.NET#命名空间"System.Data"中不存在类型或命名空间名称"Linq"(是否缺少程序集引用?)

    添加完.dbml(LINQ to SQL类文件)文件后,双击.designer.cs源文件时,发现编译器提示:命名空间"System.Data"中不存在类型或命名空间名称" ...