antd transfer tree基于树结构的穿梭框
时间: 2023-06-28 17:09:40 浏览: 104
antd transfer tree 是一个基于树结构的穿梭框组件,它可以让用户在两个树形结构之间进行拖拽式的选择操作,同时还支持搜索、展开、收起等功能,非常适合用于需要选择大量数据的场景。
在使用时,首先需要通过 dataSource 属性传入树形数据源,然后通过 render 函数来自定义每个节点的展示方式。同时,还可以通过 showSearch、searchPlaceholder、treeDefaultExpandAll 等属性来控制搜索、默认展开等行为。
下面是一个简单示例:
```
import { TransferTree } from 'antd';
const data = [
{
title: 'node1',
key: 'node1',
children: [
{
title: 'child1-1',
key: 'child1-1',
},
{
title: 'child1-2',
key: 'child1-2',
},
],
},
{
title: 'node2',
key: 'node2',
children: [
{
title: 'child2-1',
key: 'child2-1',
},
{
title: 'child2-2',
key: 'child2-2',
},
],
},
];
function renderTreeNode(node) {
return <span>{node.title}</span>;
}
function App() {
return (
<TransferTree
dataSource={data}
render={renderTreeNode}
showSearch
searchPlaceholder="Search"
treeDefaultExpandAll
/>
);
}
```