Transfer穿梭框

双栏穿梭选择框。

何时使用#

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

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

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

代码演示

18 项 Source
1/2 项 Target

最基本的用法,展示了 nzDataSource 每行的渲染函数 nzRender 以及回调函数 nzChangenzSelectChange 的用法。

expand codeexpand code
加载中
12 项
8 项

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

expand codeexpand code
加载中
9 项
11 项

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

expand codeexpand code
加载中
18 项
NameTagDescription
content1catdescription of content1
content2dogdescription of content2
content5dogdescription of content5
content6birddescription of content6
content7catdescription of content7
content8dogdescription of content8
content9birddescription of content9
content10catdescription of content10
content11dogdescription of content11
content12birddescription of content12
2 项
NameDescription
content3description of content3
content4description of content4

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

expand codeexpand code
加载中
5 项
0-00-10-1-00-1-10-3
0 项

暂无数据

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

expand codeexpand code
加载中
0 项

暂无数据

0 项

暂无数据

0 项
0 项

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

expand codeexpand code
加载中

API#

nz-transfer#

参数说明类型默认值
[nzDataSource]数据源,其中若数据属性 direction: 'right' 将会被渲染到右边一栏中或使用 nzTargetKeysTransferItem[][]
[nzDisabled]是否禁用booleanfalse
[nzTitles]标题集合,顺序从左至右string[]['', '']
[nzOperations]操作文案集合,顺序从下至上string[]['', '']
[nzListStyle]两个穿梭框的自定义样式,等同 ngStyleobject-
[nzItemUnit]单数单位string'项目'
[nzItemsUnit]复数单位string'项目'
[nzRenderList]自定义渲染列表,见示例Array<TemplateRef<void> | null>[null, null]
[nzRender]每行数据渲染模板,见示例TemplateRef<void>-
[nzFooter]底部渲染模板,见示例TemplateRef<void>-
[nzShowSearch]是否显示搜索框booleanfalse
[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 为不可用状态booleanfalse
checked指定 checkbox 为选中状态booleanfalse

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-