首页 > 行业动态 > 正文

用Vue.js 递归组件实现树形菜单的方法
2016-12-26 16:55:53   来源:   评论:0 点击:

最近看了 Vue js 的递归组件,实现了一个最基本的树形菜单。项目结构:供大家参考:main js 作为入口,很简单:123456789importVue fro
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单。

项目结构:
供大家参考:

 

main.js 作为入口,很简单:

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
 
Vue.config.debug = true
 
import main from './components/main.vue'
new Vue({
  el: '#app',
  render: h => h(main)
})

它引入了一个组件 main.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<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>
 

就这么简单。这篇文章还真没什么可写的。

截图效果如下:



更多精彩关注:http://www.icketang.com/

1000集大型前端视频地址:http://www.icketang.com/2016/ickt_state_1028/31.html

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/

相关热词搜索:递归 树形 组件

上一篇:解决ie兼容渲染的小技巧
下一篇:利用vue.js入门之最基础的双向绑定操作

分享到: 收藏