Transfer穿梭框
Transfer
穿梭框
双栏穿梭选择框。
使用import { Transfer } from "antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 source，右边一栏为 target，API 的设计也反映了这两个概念。
注意：穿梭框组件只支持受控使用，不支持非受控模式。
最基本的用法，展示了 dataSource、targetKeys、每行的渲染函数 render 以及回调函数 onChange onSelectChange onScroll 的用法。
通过 oneWay 将 Transfer 转为单向样式。
带搜索框的穿梭框，可以自定义搜索函数。
穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。
自定义渲染每一个 Transfer Item，可用于渲染复杂数据。
大数据下使用分页。
| Name | Tag | Description | |
|---|---|---|---|
| content1 | CAT | description of content1 | |
| content2 | DOG | description of content2 | |
| content3 | BIRD | description of content3 | |
| content4 | CAT | description of content4 | |
| content5 | DOG | description of content5 | |
| content6 | BIRD | description of content6 | |
| content7 | CAT | description of content7 | |
| content8 | DOG | description of content8 | |
| content9 | BIRD | description of content9 | |
| content10 | CAT | description of content10 |
| Name | Tag | Description | |
|---|---|---|---|
暂无数据 | |||
使用 Table 组件作为自定义渲染列表。
使用 Tree 组件作为自定义渲染列表。
使用 status 为 Transfer 添加状态，可选 error 或者 warning。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外 | RecordType extends TransferItem = TransferItem[] | [] | |
| disabled | 是否禁用 | boolean | false | |
| selectionsIcon | 自定义下拉菜单图标 | React.ReactNode | 5.8.0 | |
| filterOption | 根据搜索内容进行筛选，接收 inputValue option direction 三个参数，(direction 自5.9.0+支持)，当 option 符合筛选条件时，应返回 true，反之则返回 false | (inputValue, option, direction: left | right): boolean | - | |
| footer | 底部渲染函数 | (props, { direction }) => ReactNode | - | direction: 4.17.0 |
| listStyle | 两个穿梭框的自定义样式 | object|({direction: left | right}) => object | - | |
| locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode | ReactNode[]; } | { itemUnit: 项, itemsUnit: 项, searchPlaceholder: 请输入搜索内容 } | |
| oneWay | 展示为单向样式 | boolean | false | 4.3.0 |
| operations | 操作文案集合，顺序从上至下 | string[] | [>, <] | |
| operationStyle | 操作栏的自定义样式 | CSSProperties | - | |
| pagination | 使用分页样式，自定义渲染列表下无效 | boolean | { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean } | false | 4.3.0 |
| render | 每行数据渲染函数，该函数的入参为 dataSource 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 label 字段为 ReactElement，value 字段为 title | (record) => ReactNode | - | |
| selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode | (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - | |
| selectedKeys | 设置哪些项应该被选中 | string[] | number[] | [] | |
| showSearch | 是否显示搜索框，或可对两侧搜索框进行配置 | boolean | { placeholder:string,defaultValue:string } | false | |
| showSelectAll | 是否展示全选勾选框 | boolean | true | |
| status | 设置校验状态 | 'error' | 'warning' | - | 4.19.0 |
| targetKeys | 显示在右侧框数据的 key 集合 | string[] | number[] | [] | |
| titles | 标题集合，顺序从左至右 | ReactNode[] | - | |
| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | - | |
| onScroll | 选项列表滚动时的回调函数 | (direction, event): void | - | |
| onSearch | 搜索框内容时改变时的回调函数 | (direction: left | right, value: string): void | - | |
| onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | - |
Transfer 支持接收 children 自定义渲染列表，并返回以下参数：
| 参数 | 说明 | 类型 | 版本 |
|---|---|---|---|
| direction | 渲染列表的方向 | left | right | |
| disabled | 是否禁用列表 | boolean | |
| filteredItems | 过滤后的数据 | RecordType[] | |
| selectedKeys | 选中的条目 | string[] | number[] | |
| onItemSelect | 勾选条目 | (key: string | number, selected: boolean) | |
| onItemSelectAll | 勾选一组条目 | (keys: string[] | number[], selected: boolean) |
<Transfer {...props}>{(listProps) => <YourComponent {...listProps} />}</Transfer>
按照 React 的规范，所有的组件数组必须绑定 key。在 Transfer 中，dataSource 里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。
// 比如你的数据主键是 uidreturn <Transfer rowKey={(record) => record.uid} />;
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| headerHeight | 顶部高度 | string | number | 40 |
| itemHeight | 列表项高度 | string | number | 32 |
| itemPaddingBlock | 列表项纵向内边距 | string | number | 5 |
| listHeight | 列表高度 | string | number | 200 |
| listWidth | 列表宽度 | string | number | 180 |
| listWidthLG | 大号列表宽度 | string | number | 250 |
为了保持页码同步，在勾选时可以不移除选项而以禁用代替：https://codesandbox.io/s/objective-wing-6iqbx
