vue实现json树结构（面试题）

01.需求

1.JSON数据如下图所示

2.将JSON结构使用代码将其展示在界面上，如下图所示

02.实现思路

1.定义三层组件，第一层遍历当前数组传给子组件

2.第二层组件定义内容层、json-tree层、json-tree层再进行递归并将值传回当前组件

3.内容层通过渲染函数自定义所展示的信息

4.通过递归循环后所有层级内容都会传给内容层

03.注意

1.json-tree层组件为本身，需指定组件名称以及name选项

2.内容层参数为json-tree层参数，否则递归json-tree层本身的时候取不到值

3.内容层props中的参数需要json-tree层参数一致（这里统一为node）

代码

1.JSON数据

[
    {
      label: "一级 1",
      children: [
        {
          label: "二级 1-1",
          children: [
            {
              label: "三级 1-1-1",
            },
          ],
        },
      ],
    },
    {
      label: "一级 2",
      children: [
        {
          label: "二级 2-1",
          children: [
            {
              label: "三级 2-1-1",
              children: [
                    {
                        label: "四级 2-1-1-1",
                    },
              ]
            },
          ],
        },
        {
          label: "二级 2-2",
          children: [
            {
              label: "三级 2-2-1",
            },
          ],
        },
      ],
    },
    {
      label: "一级 3",
      children: [
        {
          label: "二级 3-1",
          children: [
            {
              label: "三级 3-1-1",
            },
          ],
        },
        {
          label: "二级 3-2",
          children: [
            {
              label: "三级 3-2-1",
            },
          ],
        },
      ],
    }
  ]
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

2.tree.vue

<template>
  <div class="json-tree">
    <json-tree
      v-for="(item, index) in data"
      :key="index"
      :node="item"
    ></json-tree>
  </div>
</template>
<script type="text/jsx">
import JsonTree from "./jsonTree";
export default {
  components: {
    "json-tree": JsonTree,
  },
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                  children: [
                        {
                            label: "四级 2-1-1-1",
                        },
                  ]
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      num: 0,
    };
  },
  mounted() {
    this.deepList(this.data);
  },
  methods: {
    deepList(list) {
      var that = this;
      list.filter(v => {
        if (v.children) {
            that.num++;
            that.$set(v, "level", that.num);
            that.deepList(v.children);
        }else{
            that.$set(v, "level", (that.num+1)); 
            that.num = 0;
        }
      });
    }
  },
};
</script>

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

3.jsonTree.vue

<template>
    <div class="json-tree-node">
        <div class="json-tree-node__content" :style="{ 'margin-left':(node.level * 15) + 'px' }">
            <node-content :node="node"></node-content>
        </div>
        <div class="json-tree-node__children">
            <json-tree 
                v-for="(item,index) in node.children" 
                :key="index"
                :node="item">
            </json-tree>
        </div>
    </div>
</template>
<script type="text/jsx">
   export default {
        name:'JsonTree',
        componentName: 'JsonTree',
        props:{
            node:{
                default(){
                    return {}
                }
            }
        },
        components:{
            NodeContent:{
                props:{
                    node:{
                        require:true
                    }
                },
                render(h){
                    const node = this.node;
                    return (<span>{node.label}</span>)
                }
            }
        }
    }
</script>
<style scoped>
</style>

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