标签：控件 转换成 treeData 树状 树形 数据

首先,什么是树形控件?

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

 

可以看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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。