双栏穿梭选择框。
用直观的方式在两栏中移动元素,完成选择行为。
选择一个或以上的选项后,点击对应的方向键,可以把选中的选项移动到另一栏。 其中,左边一栏为source
,右边一栏为target
,API 的设计也反映了这两个概念。
最基本的用法,展示了nzDataSource
、每行的渲染函数 render
以及回调函数nzSelectChange
nzChange
的用法。
带搜索框的穿梭框,可以自定义搜索函数。
穿梭框高级用法,可配置操作文案,可定制宽高,可对底部进行自定义渲染。
自定义渲染每一个 Transfer Item,可用于渲染复杂数据。
利用 canMove
允许在穿梭过程中二次校验;示例默认向右移时强制第一项不可穿梭。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzDataSource | 数据源,其中若数据属性direction: 'right' 将会被渲染到右边一栏中 |
TransferItem[] | [] |
nzTitles | 标题集合,顺序从左至右 | string[] | ['', ''] |
nzOperations | 操作文案集合,顺序从下至上 | string[] | '>', '<' |
nzListStyle | 两个穿梭框的自定义样式,以ngStyle 写法标题 |
object | |
nzItemUnit | 单数单位 | string | 项目 |
nzItemsUnit | 复数单位 | string | 项目 |
#render | 每行数据渲染模板,见示例 | TemplateRef | |
#footer | 底部渲染模板,见示例 | TemplateRef | |
nzShowSearch | 是否显示搜索框 | boolean | false |
nzFilterOption | 接收inputValue option 两个参数,当 option 符合筛选条件时,应返回 true ,反之则返回 false 。 |
||
nzSearchPlaceholder | 搜索框的默认值 | 请输入搜索内容 | |
nzNotFoundContent | 当列表为空时显示的内容 | 列表为空 | |
canMove | 穿梭时二次校验。 注意:穿梭组件内部始终只保留一份数据,二次校验过程中需取消穿梭项则直接删除该项;具体用法见示例。 |
||
(nzChange) | 选项在两栏之间转移时的回调函数 | ||
(nzSearchChange) | 搜索框内容时改变时的回调函数 | ||
(nzSelectChange) | 选中项发生改变时的回调函数 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题,用于显示及搜索关键字判断 | string | - |
direction | 指定数据方向,若指定right 为右栏,其他情况为左栏 |
left right |
- |
disabled | 指定checkbox为不可用状态 | boolean | false |
checked | 指定checkbox为选中状态 | boolean | false |