53 lines
2.5 KiB
Markdown
53 lines
2.5 KiB
Markdown
---
|
|
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'] | - | - |
|