# 页面组件：树组件

来源快照：`result_data_new_260518.json`

- 来源 ID：`1969690483966450667`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 页面图表
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**1.  ****场景说明  **

页面树组件是页面中常用的功能组件之一，利用树组件可以实现数据信息的多级分类展示，用户点击某一级节点，即可执行相应的节点动作。例如大型的仓储企业会在各地设立一级仓库、二级仓库等，每个仓库存储相应的物品信息。利用树组件不仅可以清晰地展示仓库的上下级关系，还可以通过点击某个仓库，直接查看该仓库的物品信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707786218135563&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

** **

**2.  ****功能简介**  

上述场景就是通过搭建页面-树组件实现的，树组件的搭建依赖数据源，在本场景中，我们首先搭建一个仓库信息表，展示仓库的上下级关系，并以此作为树的节点数据源。此外，通过树节点的节点动作打开库存信息台账，并根据参数过滤使其只展示当前仓库下的物品信息。

  


**3.  ****操作说明**  

**1.****搭建仓库信息表，作为节点数据源**

为实现仓库的上下级联系，我们需要在表单中添加一个关联e-Builder字段，关联本表单，使其成为上级仓库，仓库信息表的示例数据如下所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707786218135577&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**2.****搭建库存信息表，记录库存物品所在仓库**

在库存信息表中，利用关联e-Builder字段关联仓库信息表，从而记录库存物品所存放的仓库，示例数据如下图所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707790633369623&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.****树组件的详细配置与功能点详解**

**3.1****新建页面，放入树组件**

所需的数据信息完善之后，我们新建一个页面，首先设置页面的整体布局，为了实现场景中的效果，我们设置页面整体布局为左边栏，并将树组件拖拽放入左边栏中，并拖动调整成合适的比例：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707790633369636&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.2****根节点功能介绍**

点击树组件，在右侧操作栏中首先可以看到根节点的设置，树组件默认开启根节点，根节点不需要取数据源，可以设置节点动作打开某个页面。其与后面设置的树节点互不影响，用户可以选择开启/关闭根节点。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707790487937061&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

此外，“根节点名称”清空后，根节点在树组件上不显示，但是支持设置“根节点动作”，例如在本场景中，我们需要用户进入页面时，首先能看到所有仓库信息，配置及展示效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707794742902869&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.3****设置树节点，场景主要功能配置**

在节点设置中添加树节点，进入节点设置详细页面：

**a.****来源类型：** 目前支持数据源、组织结构、组织部门、我的下属、我的关注五种，除数据源以外，其他四种都是默认取系统中的人员组织信息。数据源支持eb表单、数据加工、业务模块以及外部数据源，本场景中我们选择表单“仓库信息表”。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707799035191306&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**b.****根节点主键值：** 该功能可以实现数据的过滤，例如来源类型选择组织部门，根节点主键值设置为“{DepartmentId}”当前操作者部门，那么每一个打开该页面的人只会看到自己的部门：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707799035191347&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**c****．选择框分类：** 若选取的数据源中有“下拉类型”的字段，则可以选择按该字段进行分类，例如在本场景中，仓库信息表中，仓库类型为下拉框字段，分为一级仓库、二级仓库：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707799035191435&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

若用户想要按照仓库类型分类，则设置效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707803484717121&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

若用户不按照选择框分类，而是按照仓库的上下级分类，则设置效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707803383169172&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**d.****节点动作：** 左侧树节点设置完成后，需要根据节点设置相应的动作，本场景中，我们需要点击某个仓库，打开库存信息台账，并且只展示当前仓库的库存。首先链接地址选择库存信息表的表格视图台账，之后利用参数设置进行数据过滤。参数左侧是库存信息表的字段，由于在库存信息表中，我们利用关联eb字段“存放仓库”关联了仓库信息表，因此设置左侧“存放仓库”等于右侧“数据ID”,关联eb字段对应的是被关联表单的数据ID。最后设置打开方式，由于页面整体设置成“左边栏”，所以打开方式可以设置成当前布局-中间栏：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707807829131268&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**e.****包含下级：** 例如在本场景中，分为总仓和各地仓库，两者都会各自存储商品。该按钮开启后，总仓中展示的库存物品会包含下级的物品：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707811998269511&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**f.****节点操作设置：** 首先是操作数据，开启后用户直接可以新增、编辑、删除节点信息，注意目前仅支持eb表单数据源，并且在表单中需要有相应的创建、共享权限。另一个是显示数量，可以添加一些字段进行显示，例如显示仓库编号：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707816291295233&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**g.****数据过滤，排序字段** ：用户可以根据实际情况进行设置，例如过滤某些地区的仓库等。

 

全部设置完成后，即可实现点击左侧仓库名称，右侧展示该仓库下的库存信息： 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707816291295250&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
