双栏穿梭选择框。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| mode | 移动选项模式 可选值: 'normal', 'simple' |
Enum | 'normal' |
| dataSource | 数据源 | Array<Object> | [] |
| value | （用于受控）当前值 | Array<String> | - |
| defaultValue | （用于非受控）初始值 | Array<String> | [] |
| onChange | 值发生改变的时候触发的回调函数 签名: Function(value: Array, data: Array, extra: Object) => void 参数: value: {Array} 右面板值 data: {Array} 右面板数据 extra: {Object} 额外参数 extra.leftValue: {Array} 左面板值 extra.leftData: {Array} 左面板数据 extra.movedValue: {Array} 发生移动的值 extra.movedData: {Object} 发生移动的数据 extra.direction: {String} 移动的方向，值为'left'或'right' |
Function | - |
| onSelect | Item 被选中的时候触发的回调函数 签名: Function(sourceSelectedValue: Array, targetSelectedValue: Array, trigger: String) => void 参数: sourceSelectedValue: {Array} 源面板选中的 Item 列表 targetSelectedValue: {Array} 目标面板选中的 Item 列表 trigger: {String} 触发面板，值为'source'或'target' |
Function | - |
| disabled | 是否禁用 | Boolean | false |
| leftDisabled | 是否禁用左侧面板 | Boolean | false |
| rightDisabled | 是否禁用右侧面板 | Boolean | false |
| itemRender | 列表项渲染函数 签名: Function(data: Object) => ReactNode 参数: data: {Object} 数据 返回值: {ReactNode} 列表项内容 |
Function | data => data.label |
| filter | 自定义搜索函数 签名: Function(searchedValue: String, data: Object) => Boolean 参数: searchedValue: {String} 搜索的内容 data: {Object} 数据 返回值: {Boolean} 是否匹配到 |
Function | 根据 label 属性匹配 |
| onSearch | 搜索框输入时触发的回调函数 签名: Function(searchedValue: String, position: String) => void 参数: searchedValue: {String} 搜索的内容 position: {String} 搜索面板的位置 |
Function | () => {} |
| searchPlaceholder | 搜索框占位符 | String | - |
| showSearch | 左右面板是否显示搜索框 | Boolean/Array<Boolean> | false |
| searchProps | 左右面板搜索框配置项，同 Search 组件 props | Object/Array<Object> | - |
| notFoundContent | 列表为空显示内容 | ReactNode/Array<ReactNode> | 'Not Found' |
| titles | 左右面板标题 | Array<ReactNode> | [] |
| operations | 向右向左移动按钮显示内容 | Array<ReactNode> | [<Icon type="arrow-right" />, <Icon type="arrow-left" />] |
| defaultLeftChecked | 左面板默认选中值 | Array<String> | [] |
| defaultRightChecked | 右面板默认选中值 | Array<String> | [] |
| listClassName | 左右面板列表自定义样式类名 | String | - |
| listStyle | 左右面板列表自定义样式对象 | Object | - |
| sortable | 是否允许拖拽排序 | Boolean | false |
| onSort | 拖拽排序时触发的回调函数 签名: Function(value: Array, position: String) => void 参数: value: {Array} 排序后的值 position: {String} 拖拽的面板位置，值为：left 或 right |
Function | () => {} |
| id | 请设置 id 以保证transfer的可访问性 | String | - |
| children | 接收 children 自定义渲染列表 签名: Function() => void |
Function | - |
| useVirtual | 是否开启虚拟滚动 | Boolean | - |
| showCheckAll | 是否显示底部全选 checkbox | Boolean | true |
| 按键 | 说明 |
|---|---|
| Up Arrow | 获取当前项的前一项焦点 |
| Down Arrow | 获取当前项的后一项焦点 |
| Enter | 当前列表选中的项移动到另一个列表 |
| SPACE | 选择/取消当前项或当前列表选中的项移动到另一个列表 |