# 树组件实现右侧内容切换

来源快照：`result_data_new_260518.json`

- 来源 ID：`1969536289371843962`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 页面（仪表盘）专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

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

**  
**

在业务管理过程中，想要实现数据树形展示，点击树形内容切换右侧内容。可以通过表单添加数据，页面设计中使用左右布局，左侧添加树组件，维护组件内容的方式实现。展示效果如下：

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705746091155469&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）新建树结构表单，并录入基础数据

  


1.1  树结构表单中主要包括下拉属性（分类/课件）、名称、上级、地址、分类序号、课件序号字段；其中上级字段是eb字段，关联树结构表单（主要用于上下级分类），地址默认不显示

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705746027610130&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)

  


1.2 利用属性联动添加当属性为分类时，分类序号必填、课件序号隐藏；属性为课件时，字段课件序号必填、分类序号隐藏行、地址字段必填

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705746077057072&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)

  


1.3 录入基础数据，设计树结构表格视图  


  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705750422355976&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）左树右表页面设计

  


2.1 新建页面，页面布局调整为左右分栏

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705750523904018&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.2 左侧分栏添加树组件，不启用根节点

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705754650214403&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 添加树节点，节点名称为“分类”，来源类型为数据源，数据源为树结构表单，主键为数据ID，显示名为名称，上级选择上级字段，添加数据过滤"属性等于分类"，添加排序字段

分类序号并升序显示

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705754798530579&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.4 添加树节点，节点名称为“课件”，来源类型为数据源，数据源为树结构表单，主键为数据ID，显示名为名称

**配置节点动作单击打开页面** ：链接地址选择字段地址，打开方式选择当前布局，选择区域为中间栏

**添加数据过滤"属性等于课件** "，添加排序字段分类序号并升序显示

**上级节点设置** ：上级节点选择分类、本节点字段上级、上级节点字段数据id

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705754650214424&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)
