Transfer 穿梭框

双栏穿梭选择框。

何时使用 #

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

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

代码演示

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

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

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

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

利用 canMove 允许在穿梭过程中二次校验;示例默认向右移时强制第一项不可穿梭。

API

参数 说明 类型 默认值
nzDataSource 数据源,其中若数据属性direction: 'right'将会被渲染到右边一栏中 TransferItem[] []
nzTitles 标题集合,顺序从左至右 string[] ['', '']
nzOperations 操作文案集合,顺序从下至上 string[] '>', '<'
nzListStyle 两个穿梭框的自定义样式,以ngStyle写法标题 object
nzItemUnit 单数单位 string 项目
nzItemsUnit 复数单位 string 项目
#render 每行数据渲染模板,见示例 TemplateRef
#footer 底部渲染模板,见示例 TemplateRef
nzShowSearch 是否显示搜索框 boolean false
nzFilterOption 接收inputValueoption 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false
nzSearchPlaceholder 搜索框的默认值 请输入搜索内容
nzNotFoundContent 当列表为空时显示的内容 列表为空
canMove 穿梭时二次校验。

注意:穿梭组件内部始终只保留一份数据,二次校验过程中需取消穿梭项则直接删除该项;具体用法见示例。

(nzChange) 选项在两栏之间转移时的回调函数
(nzSearchChange) 搜索框内容时改变时的回调函数
(nzSelectChange) 选中项发生改变时的回调函数

TransferItem

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