将扁平数据转换成树状控件方法
作者：互联网
首先,什么是树形控件?
有一些业务场景在描述主体关系的时候必须使用树形数据，比如：我们常见的家庭成员关系图，公司里的组织架构等，要描述这样的业务场景，与之对应的，我们就得给出树形结构的数据.
可以看elelement-ui提供的树形控件具体讲解,我直接粘贴一个例子.
为了达到这个目的,我们需要封装将扁平数据转换成树状结构方法.
看代码,我提前准备了所需要的数据.
我们来分析一下数据,首先项目经理是这里的领导,其pid=",下面的都是员工,可以看出员工的pid如果等于领导的id,那么这些符合条件的员工就会在领导的旗下,也就是子下属.下面我们要筛选出pid=;领导id的员工.
核心代码:
看运行效果:
可以看出,我们筛选对了!
但是在项目中我们怎么用呢?
比如说,我这有 一部分扁平数据,当然它有子部门,只不过现在还没有转换.
再看转换后的树形结构数据
我们在项目中看下,具体数据来源不在此说明.
步骤:
1.首先引入到我们需要转换成树状结构的文件中
2.定义一个treeData数组,用来接收转换成树状结构的数据
3.把转换成树状结构的数据给 treeData
也就是说,用tranListToTreeData包裹你获取到的数据
4. 利用element-ui提供的树形控件
他本身提供了一个data属性,我们只需要将 treeData的数据给data就可以
5.注意事项:现在获取到的数据还不能默认展开,只有提供了default-expand-all(是否默认展开所有节点,默认是false)这个属性,树状结构的数据才会默认展开,也就是我标注红色箭头的地方.
你学会了吗,赶紧动手试一下吧!!
标签：控件,转换成,treeData,树状,树形,数据 来源： https://blog.csdn.net/huihui_999/article/details/121190073