# Transfer 穿梭框

主要的属性都是基于Ant.design的Transfer组件来实现的, 并做了一些简单的整合. 关于每个字段的详细使用方式, 可以参考: https://ant.design/components/transfer-cn/

## 代码演示

{{demo}}

-----
## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 自定义类 | string |  |
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | TransferItem\[] | \[] |
| lazy | Transfer 使用了 [react-lazy-load](https://github.com/loktar00/react-lazy-load) 优化性能，这里可以设置相关参数。设为 `false` 可以关闭懒加载。 | object|boolean |
| listStyle | 两个穿梭框的自定义样式 | object |  |
| notFoundContent | 当列表为空时显示的内容 | string, ReactNode | '列表为空' |
| operations | 操作文案集合，顺序从下至上 | string\[] | ['>', '<'] |
| searchPlaceholder | 搜索框的默认值 | string | '请输入搜索内容' |
| renderStr | 自定义显示模板, 可以使用$item作为每次渲染的变量 | ExpressionString | #ES{$item.title} |
| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] |
| showSearch | 是否显示搜索框 | boolean | false |
| targetKeys | 显示在右侧框数据的key集合 | string\[] | \[] |
| titles | 标题集合，顺序从左至右 | string\[] | ['', ''] |

### TransferItem 数据结构
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| key | 每一条记录的键值 | string |  |
| title | 记录的标题 | string |  |
| description | 记录的描述 | string |  |
| disabled | 记录是否可用 | boolean | false |