Select 选择器

类似 Select2 的选择器。

何时使用 #

弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。

代码演示

基本使用。

展开后可对选项进行搜索。

搜索和远程数据结合,通过设置 nzFilterfalse关闭只显示匹配选项

tags select,随意输入的内容,回车键新增tag

种大小的选择框,当 nzSize 分别为 largesmall时,输入框高度为 32px22px,默认高度为 28px

多选,从已有条目中选择(scroll the menu)

多选搜索框和远程数据结合,注意此时需要保留未列在当前选项中但已被加入多选框中的数据,需要添加 nzKeepUnListOptions属性

API

nz-select

参数 说明 类型 默认值
ngModel 指定当前选中的条目,支持双向绑定 Array(多选)/String/Object(单选)
nzSearchChange 搜索内容变化回调函数,参数为搜索内容 Func
nzMode 设置 Select 的模式 'multiple' | 'tags' -
nzOpenChange 下拉菜单打开关闭回调函数 Func
nzFilter 是否根据输入过滤选项 Boolean true
nzKeepUnListOptions 当添加该属性时,将保留不在当前选项框但已被选择的数据,仅对多选有效 attribute -
nzAllowClear 当添加该属性时,支持清除, 单选模式有效 attribute -
nzPlaceHolder 选择框默认文字 String
nzShowSearch 是否启用搜索框 Boolean false
nzNotFoundContent 当下拉列表为空时显示的内容 String 'Not Found'

nz-option

参数 说明 类型 默认值
nzLabel 用于显示展示的option内容 String
nzValue option的value值,与nz-select选择option后的ngModel属性对应 String/Object -
nzDisabled 是否禁用 Boolean false