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

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

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

• 

步骤：

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

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

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)


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