指引型树型组件的封装

最近，由于业务的需要，需要做一个指向形树型组件。在寻找各种文章后，终于有了思路。🤒🤒🤒

树型组件的思路主要是递归。谈到递归，我们首先要有递归的出口。递归的出口就是没有孩子节点了。这个时候，我们就是叶子节点。

实现效果图：

1.dom结构

树型组件肯定由两部分构成，一部分是节点本身，另一部分为孩子节点。

            
            
{{ item.title }}
            
            

                
            
        
1
2
3
4
5
6
7
8
9

这样，基本的显示就能够出来了。

2.缩进问题

因为我们每往下一级，我们就得往右边缩进一段距离。因此，我们的孩子肯定要包括在上一层的某个节点当中。因此需要给上述代码再包裹一层DOM结构。（在设置padding-left的时候内边距是累加的）。

 

        


            
            
{{ item.title }}
            
            

                
            
        
    
1
2
3
4
5
6
7
8
9
10
11

3.指引线

这里，我采用的思路是结合一个dom元素和一个伪元素进行布局。

dom元素主要是进行竖线（根据每一个类的高来布局）。伪元素进行横线（自己设）。然后计算边距。

<div class="grandFather" :class="{ 'isRoot': deep === 1 }">
        <div v-for="(item, index) in data" :key="index" class="grandFather_item">
            <div class="line"></div>
            <!-- 父类 -->
            <div class="father" :class="{'isRoot':deep===1}" @click="handleExplain(index)" style="line-height: 30px;height: 30px;">{{ item.title }}</div>
            <!-- 如果有子类,那么将子类传过去 -->
            <div class="children" v-if="item.children && item.children.length !== 0" v-show="item.isExplain">
                <Tree :data="item.children" :deep="deep + 1"></Tree>
            </div>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11

如果要设置点状，等形状，可以采用边框的形式来做。

最后代码如下

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

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

最后大家如果有更好的想法，欢迎在评论区留言!🤓🤓🤓