VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线_两个el-tree的循环遍历_vue树形结构前端遍历

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

步骤：

定义模板（做循环遍历处理）：

<template>
          <div class="container">
            <el-card v-for="(item,index) in routeList" :key="index" class="routeList-box">
              <!-- <el-collapse v-model="activeNames">
 <el-collapse-item :title="item.title" :name="index"> -->
              <el-tree
 ref="tree"
 class="el-tree"
 show-checkbox
 node-key="id"
 :indent="0"
 :data="item.list"
 :props="defaultProps"
 :highlight-current="true"
 :default-expand-all="true"
 :render-content="renderContent"
 @node-expand="handleExpand"
 />
              <!--:indent="0"为相邻级节点间的水平缩进，单位为像素，如果要加指示线需设置为0，否则缩进会很大-->
              <!-- </el-collapse-item>
 </el-collapse> -->
            </el-card>
          </div>
        </template>

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

tree的参数说明请参考官方文档el-tree
定义模板数据：

data() {
	return {
		routeList: [
        {
          // title: '授权管理后台',
          list: [
            {
              id: 1,
              label: '工程管理', //一级控件
              children: [
                {
                  id: 2,
                  label: '物料管理', //二级控件
                  children: [
                    {
                      id: 4,
                      label: '列表查看', //三级控件
                      // children: [
                      // {
                      // id: 7,
                      // label: '页面查看权限' //四级控件
                      // },
                      // {
                      // id: 8,
                      // label: '编辑'
                      // }
                      // ]
                    },
                    {
                      id: 5,
                      label: '查询',
                      // children: [
                      // {
                      // id: 9,
                      // label: '次数分布child1'
                      // },
                      // {
                      // id: 10,
                      // label: '次数分布child2'
                      // }
                      // ]
                    }
                  ]
                },
                {
                  id: 3,
                  label: '工艺流程管理',
                  children: [
                    {
                      id: 6,
                      label: '列表查看',
                      // children: [
                      // {
                      // id: 7,
                      // label: '页面查看权限'
                      // }
                      // ]
                    },
                    {
                      id: 7,
                      label: '查询',
                      // children: [
                      // {
                      // id: 7,
                      // label: '页面查看权限'
                      // }
                      // ]
                    }
                  ]
                }
              ]
            },
            {
              id: 111,
              label: '销售管理',
              children: [
                {
                  id: 112,
                  label: '订单管理',
                  children: [
                    {
                      id: 113,
                      label: '列表查看'
                    },
                    {
                      id: 114,
                      label: '查询'
                    },
                    {
                      id: 114,
                      label: '重置'
                    },
                    {
                      id: 114,
                      label: '复选框'
                    },
                    {
                      id: 114,
                      label: '新增订单'
                    },
                    {
                      id: 114,
                      label: '导出'
                    },
                    {
                      id: 114,
                      label: '打印'
                    },
                    {
                      id: 114,
                      label: '操作'
                    },
                    {
                      id: 114,
                      label: '订单详情'
                    },
                    {
                      id: 114,
                      label: '编辑'
                    },
                    {
                      id: 114,
                      label: '作废'
                    },
                    {
                      id: 114,
                      label: '出库'
                    },
                    {
                      id: 114,
                      label: '结束'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
	}
}


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173