---
category: Components
title: TreeTransfer 树穿梭框
toc: content
group:
  title: 数据展示
  order: 2
---

盒子树

## 代码演示

<code src="./demo/basic.tsx">基本用法</code>
<code src="./demo/noSearch.tsx">没有搜索框</code>
<code src="./demo/withFilter.tsx">加载filter按钮</code>
<code src="./demo/withMap.tsx">和地图组件搭配使用</code>
<code src="./demo/withModal.tsx">和Modal组合使用</code>

## API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| titles | 顶部标题 | string[]、ReactNode[] | [] | - |
| dataSource | 数据 | TreeDataNode[] | [] | - |
| treeProps | 左侧树的props | antd-tree | [] | - |
| showLeftSearch | 显示左侧搜索框 | boolean | true | - |
| searchInputProps | 左侧搜索透传 | InputProps | {} | - |
| targetItems | 选中数据 | TreeDataNode[] | [] | - |
| checkedKeys | 选中的key数组 | string[] | [] | - |
| showFilter | 是否显示搜索框边上的dom | boolean | false | - |
| leftPanelWidth | 左边面板高度 | string、number | - | - |
| leftPanelScrollY | 左边面板滚动高度 | number | - | - |
| showLeftPanelFooter | 是否显示左边面板的底部 | boolean | false | - |
| leftPanelFooterRender | 左边面板底部自定义 |  | ReactNode、string | - |
| rightPanelWidth | 右边面板高度 | number、string | - | - |
| rightPanelScrollY | 右边面板滚动高度 | number | - | - |
| showRightPanelFooter | 是否显示右边面板的底部 | boolean | false | - |
| rightPanelFooterRender | 右边边面板底部自定义 | ReactNode、string | - | - |
| tabsItems | tab列表 | 参考antd-tabs组件的 tabsProps['items'] | - | - |
| showLeftTabs | 是否显示tabs组件 | boolean | false | - |
| activeTabKey | 当前选中tab | string | - | - |
| treeBackgroundColor | 左侧树颜色 | string | #FCFCFC | - |
| leftTabsProps | 左侧树tabs的props | tabsProps | - | - |
| customLeftPanelContent | 左侧树自定义内容 | (data?: TreeDataNode[]) => ReactNode | - | - |
| filters | 左侧过滤自定义 | ButtonProps & { label: string; icon?: string } | - | - |
| onLeftTabsChange | 左侧tab点击事件 | TabsProps['onChange'] | - | - |
| onTreeSelect | 左侧树点击事件 | TreeProps['onSelect'] | - | - |
| onTreeCheck | 左侧树勾选☑️事件 | TreeProps['onCheck'] | - | - |
| onOk | 提交事件 | (data: any) => void; | - | - |
| onReset | 重置事件 |  () => void; | - | - |
| onSearch | 左侧树搜索事件 |  InputProps['onChange'] | - | - |