首先,什么是树形控件?

有一些业务场景在描述主体关系的时候必须使用树形数据，比如：我们常见的家庭成员关系图，公司里的组织架构等，要描述这样的业务场景，与之对应的，我们就得给出树形结构的数据.

 

可以看elelement-ui提供的树形控件具体讲解,我直接粘贴一个例子.

为了达到这个目的,我们需要封装将扁平数据转换成树状结构方法.

看代码,我提前准备了所需要的数据.

我们来分析一下数据,首先项目经理是这里的领导,其pid=",下面的都是员工,可以看出员工的pid如果等于领导的id,那么这些符合条件的员工就会在领导的旗下,也就是子下属.下面我们要筛选出pid=;领导id的员工.

核心代码:

 

 

看运行效果:

 

可以看出,我们筛选对了!

但是在项目中我们怎么用呢? 

比如说,我这有 一部分扁平数据,当然它有子部门,只不过现在还没有转换.

再看转换后的树形结构数据

我们在项目中看下,具体数据来源不在此说明.

步骤:

1.首先引入到我们需要转换成树状结构的文件中

2.定义一个treeData数组,用来接收转换成树状结构的数据

 

3.把转换成树状结构的数据给 treeData

也就是说,用tranListToTreeData包裹你获取到的数据

4. 利用element-ui提供的树形控件

 

他本身提供了一个data属性,我们只需要将 treeData的数据给data就可以

5.注意事项:现在获取到的数据还不能默认展开,只有提供了default-expand-all(是否默认展开所有节点,默认是false)这个属性,树状结构的数据才会默认展开,也就是我标注红色箭头的地方.

你学会了吗,赶紧动手试一下吧!!