VTree/tree.js at master · nokelong/VTree · GitHub

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
93
94
95
96
97
98
99
100
101
102
103
104

var treeJSON = {
  name: 'My Tree',
  children: [
    { name: 'hello' },
    { name: 'wat' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' },
            {
              name: 'child folder',
              children: [
                { name: 'hello' },
                { name: 'wat' },
                {
                  name: 'child folder',
                  children: [
                    { name: 'hello' },
                    { name: 'wat' }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' },
            {
              name: 'child folder',
              children: [
                { name: 'hello' },
                { name: 'wat' },
                {
                  name: 'child folder',
                  children: [
                    { name: 'hello' },
                    { name: 'wat' }
                  ]
                }
              ]
            }
          ]
        }
  ]
}

var TreeNode = Vue.extend({
    name: 'TreeNode',
    props: {
      node: {
        type: Object
      }
    },
    template: `<li >{{node.name}}
        <ul v-if="node.children && node.children.length"><TreeNode v-for="(item, index) in node.children" :node="item" :key="index"></TreeNode></ul>
    </li>`
});

var Tree = Vue.extend({
    name: 'Tree',
    props: ['node'],
    template: `<ul><tree-node :node="node"></tree-node></ul>`,
    components: {
      'tree-node': TreeNode
    }
});


new Vue({
    el: '#app',
    data: {
      treeData: treeJSON,
      title: 'Vue无层级树'
    },
    components:{Tree}
})