> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.
# 树形控件
> 本页面介绍了如何使用树形控件来展示分类和子类信息，包括创建普通表单、自定义页面设置、远程API配置以及绑定变量等步骤。适用于需要层次化展示数据的场景。
| **能力** | **免费版** | **轻享版** | **专业版** | **专属版** |
| ------ | ------- | ------- | ------- | ------- |
| 树形控件 | 不支持 | 不支持 | 支持 | 支持 |
## 1. 使用场景
当使用一个种类想要查看子类的时候，可以使用自定义页面里的树形控件
组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/advanced/tree)查看
## 2. 视频展示
## 3. 操作步骤
### 3.1 创建普通表单
新建一个普通表单，表单里可以放置多个单行文本，在右边属性界面可以修改标题名称，点击保存
### 3.2 创建自定义页面
在选择模板页面可以选择直接跳过，进入自定义编辑页面，拖拽一个树形控件和按钮组件
### 3.3 新建远程 API
在自定义页面点击左边的数据源，新建一个远程 API，修改名称、请求地址、请求参数以及数据处理
请求地址：[宜搭平台接口（页面数据源可直接调用）](/zh/yida/developer-features/aql605)
例：[https://www.yidaapps.com/dingtalk/web/](https://www.yidaapps.com/dingtalk/web/)APP-XXXXXX/v1/form/searchFormDatas.json
请求参数里的 formUuid 在首页右上角的应用设置里，每个表单都有唯一的 ID，直接复制放到请求参数里
在数据处理里找到请求完成回调函数下面的代码，修改 dataMap 后面的唯一标识，唯一标识在表单里的单行文本里，复制进去之后点击保存
```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
function didFetch(content) {
const data = content.data.map(item => {
let dataMap = item.formData;
return {
label: dataMap['textField_kplzoi0z'],
key: dataMap['textField_kplzoi0z'],
children: [{
label: dataMap['textField_kplzoi10'],
key: dataMap['textField_kplzoi10'],
children: [{
label: dataMap['textField_kplzoi11'],
key: dataMap['textField_kplzoi11']
}]
}]
}
})
content = data;
console.log("item=====>", data)
function findItem(item, arr) {
console.log("item........", item)
console.log("arr........", arr)
return arr.findIndex(value => value.key === item.key);
}
function recursion(arr) {
console.log("判断是否重复的", arr)
const newArr = [];
arr.forEach((item) => {
let index = findItem(item, newArr);
if (index !== -1) {
} else {
newArr.push(item);
}
})
return newArr;
}
let newArr = recursion(content);
console.log("newArr========>", newArr)
content = newArr;
console.log("content========>", content)
// return item;
// console.log('data:', data)
// this.setState({
// tree: data
// })
return content; // 重要，需返回 content
}
```
点击左边 JS 动作面板，复制以下代码
```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onEditFinish(key, label, node) {
console.log('key: ', key, ' label: ', label, ' node: ', node);
}
/**
* Tree onSelect
* @param selectedKeys 选中节点key的数组
* @param extra 额外的参数
*/
export function onSelect(selectedKeys, extra) {
console.log('选中节点key的数组: ', selectedKeys, ' 额外参数：', extra);
}
/**
* menu onItemClick
* 参数配置参考这里：https://fusion.design/pc/component/menu
*/
export function onItemClick(key, item, event) {
console.log(key, item, event);
}
/**
* button onClick
*/
export function onClic() {
console.log(this.$('tree_kne7wdg0').get('dataSource'));
}
/**
* button onClick
*/
export function onClick(){
console.log('onClick');
}
```
### 3.4 绑定变量
点击右边的节点数据，变量绑定选择刚才创建的远程 API 的变量，点击确定
在右下角的新建动作可以设置动作，这里选择编辑节点内容时完成
### 3.5 新拖入一个按钮组件
选择按钮组件，找到右下角的新建动作，选择内置动作，打开 URL，网站地址为刚才设置单行文本的页面（务必是访问或者新增数据的页面地址才行）
点击保存，返回首页，这个时候可以去测试一下，树形控件就已经配置完成了