基本用法

带搜索框

高级用法

自定义渲染行数据

表格穿梭框

树穿梭框

自定义状态

API

Transfer穿梭框

双栏穿梭选择框。

何时使用#

用直观的方式在两栏中移动元素，完成选择行为。

选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 source，右边一栏为 target，API 的设计也反映了这两个概念。

import { NzTransferModule } from 'ng-zorro-antd/transfer';

代码演示

基本用法

最基本的用法，展示了 nzDataSource 每行的渲染函数 nzRender 以及回调函数 nzChange、nzSelectChange 的用法。

      加载中

带搜索框

带搜索框的穿梭框，可以自定义搜索函数。

      加载中

高级用法

穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。

      加载中

自定义渲染行数据

自定义渲染每一个 Transfer Item，可用于渲染复杂数据。

      加载中

18 项

Name	Tag	Description
content1	cat	description of content1
content2	dog	description of content2
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
content11	dog	description of content11
content12	bird	description of content12

2 项

	Name	Description
	content3	description of content3
	content4	description of content4

表格穿梭框

使用 Table 组件作为自定义渲染列表。

      加载中

5 项

0-0

0-1

0-1-0

0-1-1

0-3

0 项

暂无数据

树穿梭框

使用 Tree 组件作为自定义渲染列表。

      加载中

0 项

暂无数据

0 项

暂无数据

0 项

暂无数据

0 项

暂无数据

自定义状态

使用 nzStatus 为 Transfer 添加状态，可选 error 或者 warning。

      加载中

API#

nz-transfercomponentstandalone#

参数	说明	类型	默认值
`[nzDataSource]`	数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中或使用 `nzTargetKeys`	`TransferItem[]`	`[]`
`[nzDisabled]`	是否禁用	`boolean`	`false`
`[nzTitles]`	标题集合，顺序从左至右	`string[]`	`['', '']`
`[nzOperations]`	操作文案集合，顺序从下至上	`string[]`	`['', '']`
`[nzListStyle]`	两个穿梭框的自定义样式，等同 `ngStyle`	`object`	-
`[nzItemUnit]`	单数单位	`string`	`'项目'`
`[nzItemsUnit]`	复数单位	`string`	`'项目'`
`[nzRenderList]`	自定义渲染列表，见示例	`Array<TemplateRef<void> \| null>`	`[null, null]`
`[nzRender]`	每行数据渲染模板，见示例	`TemplateRef<void>`	-
`[nzFooter]`	底部渲染模板，见示例	`TemplateRef<void>`	-
`[nzShowSelectAll]`	是否显示全选框	`boolean`	`true`
`[nzShowSearch]`	是否显示搜索框	`boolean`	`false`
`[nzFilterOption]`	接收 `inputValueoption` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。	`(inputValue: string, item: TransferItem) => boolean`	-
`[nzSearchPlaceholder]`	搜索框的默认值	`string`	`'请输入搜索内容'`
`[nzNotFoundContent]`	当列表为空时显示的内容	`string`	`'列表为空'`
`[nzCanMove]`	穿梭时二次校验。注意：穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。	`(arg: TransferCanMove) => Observable<TransferItem[]>`	-
`[nzSelectedKeys]`	设置被选中的 key 集合	`string[]`	-
`[nzTargetKeys]`	显示在右侧框数据的 key 集合	`string[]`	-
`[nzStatus]`	设置校验状态	`'error' \| 'warning'`	-
`(nzChange)`	选项在两栏之间转移时的回调函数	`EventEmitter<TransferChange>`	-
`(nzSearchChange)`	搜索框内容时改变时的回调函数	`EventEmitter<TransferSearchChange>`	-
`(nzSelectChange)`	选中项发生改变时的回调函数	`EventEmitter<TransferSearchChange>`	-

TransferItem#

参数	说明	类型	默认值
title	标题，用于显示及搜索关键字判断	`string`	-
direction	指定数据方向，若指定 `right` 为右栏，其他情况为左栏	`'left' \| 'right'`	-
disabled	指定 checkbox 为不可用状态	`boolean`	`false`
checked	指定 checkbox 为选中状态	`boolean`	`false`

TransferCanMove#

参数	说明	类型	默认值
direction	数据方向	`'left' \| 'right'`	-
list	数据源	`TransferItem[]`	`[]`

TransferChange#

参数	说明	类型	默认值
from	数据方向	`'left' \| 'right'`	-
to	数据方向	`'left' \| 'right'`	-
list	数据源	`TransferItem[]`	`[]`

TransferSearchChange#

参数	说明	类型	默认值
direction	数据方向	`'left' \| 'right'`	-
value	搜索关键词	`string`	-

nzRenderList#

参数	说明	类型	默认值
`direction`	渲染列表的方向	`'left' \| 'right'`	-
`disabled`	是否禁用列表	`boolean`	-
`items`	过滤后的数据	`TransferItem[]`	-
`onItemSelect`	勾选条目	`(item: TransferItem) => void`	-
`onItemSelectAll`	勾选一组条目	`(selected: boolean) => void`	-