---
group:
  title: 通用组件
  order: 2
title: RefactorTree
order: 5
toc: content
---
# 树组件

> 常用于页面栅格结构的左侧树

## 代码演示

<code title="基础用法" src="../../src/RefactorTree/demos/basic.tsx"></code>

<code title="指定根节点" description="配置rootName指定根节点名称，可选配置rootKey指定此根节点的key值" src="../../src/RefactorTree/demos/rootName.tsx" ></code>

<code title="限制节点选择" description="配置limitKey指定字段，则节点选择将限制于同一层级数据（可以跨节点）,checkable, checkStrictly为前提条件" src="../../src/RefactorTree/demos/limit.tsx" ></code>

<code title="指定禁用节点" description="配置disabledFields指定key字段名与value字段值(多个字段值可用`,`隔开)" src="../../src/RefactorTree/demos/disabled.tsx" ></code>

<code title="搜索" description="配置`allowSearch=true`，可显示搜索栏。`searchAuto=false`时，可配合`searchConfig.onChange()`或`searchConfig.onSearch()`使用" src="../../src/RefactorTree/demos/search.tsx" ></code>

## API
| 参数      | 说明                                      | 类型         | 默认值 |
|----------|------------------------------------------|-------------|-------|
| treeData | 树数组 | Array<字段参考optionName> | - |- |
| optionName | 指定用于显示节点的字段名称 | Object | { value: 'key', title: 'title', children: 'children', disabled: 'disabled' } |
| emptyDescription | 数据为空时显示的提示语 | String | '暂无数据' |
| rootName | 是否指定显示根节点名称 | String | - |
| rootKey | 指定根节点的key值 | String | - |
| onSelect | 点击树节点触发 | function(selectedKeys, selectData:{currentData:{}, multiData: [], selected: boolean, selectedNodes, node, event},e) | selectedKeys,e 参考官网参数，selectData: { currentData:{当前选中字段集合}, multiData: []({包含其他所有已选择字段值 })} |
| onCheck | 点击树节点触发 | function(selectedKeys,selectData,e) | selectedKeys,e 参考官网参数 , selectData: { currentData:{当前选中字段集合}, multiData: []({包含其他所有已选择字段值 })}|
| limitKey | 指定字段名，使树节点只允许勾选同一层级（在父子节点不相关联条件下`checkStrictly=true`且在`checkable`下有效）  | - |-|
| titleRender |	自定义渲染节点  | 	(nodeData) => ReactNode |-|
| icon | 自定义树节点图标(showIcon设置true时才显示)  | string\|(nodeData) => ReactNode  |-|
| nodeExtra | 自定义节点标题文本后结构，有配置titleRender时则无效 | 	(nodeData) => ReactNode |-|
| disabledFields | 指定禁用节点  | Array<{key: string, value: string}> |(value：多个字段值可用`,`隔开)|
| showSearch(`v4.1.18`) | 是否显示搜索栏  | Boolean | `false`|
| searchAuto(`v4.1.18`) | 是否关闭自动搜索，可用于自定义配置搜索后的过滤事件 | Boolean | `true`|
| searchTrigger(`v4.1.18`) | 自动搜索触发条件(与searchAuto=true配合使用）  | String | `search`/`change`|
| searchExtra(`v4.1.22`) | 搜索栏右侧扩展结构  | ReactNode | |
| searchConfig(`v4.1.18`) | 扩展配置，参考官方文档  | Object | |
| children(`v4.1.18`) | `ant-tree`前的DOM   | ReactNode | |
| footer(`v4.1.18`) | `ant-tree`后的DOM | ReactNode | |
| fullHeight(`v4.1.22`) | 内容区显示高度为100% | Boolean |false |
| ~~nodeControl~~ 弃用 | 配置节点显示“编辑与删除”图标 | - |-|
| ~~nodeItemReset~~ 弃用 | 自定义图标 | - |-|
| ~~rootIcon~~ 弃用 | 自定义根节点图标 | - |-|
| 其他配置 | 参考  [Tree props](https://ant.design/components/tree-cn/)  | - |-|



# RefactorTree ref

| 字段值      | 说明                                      | 类型         | 返回值 |
|----------|------------------------------------------|-------------|-------|
| selectAllData | 获取所有节点 | `Function` | - |- |
| transTreeData | 获取当前组件内已转换的树数据 | `Array` | - |- |
| clearSearchKey | 清空搜索关键字 |`Function`| - |- |