Select选择器

下拉选择器。

何时使用#

  • 弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。
  • 当选项少时(少于 5 项),建议直接将选项平铺,使用 Radio 是更好的选择。
import { NzSelectModule } from 'ng-zorro-antd/select';

代码演示

LucyLucyLucyLucy

基本使用。

expand codeexpand code
加载中
a10
c12
 

多选,从已有条目中选择,例子中通过 nzMaxTagCount 限制最多显示3个选项。

expand codeexpand code
加载中
 Tag Mode

tags select,随意输入的内容(scroll the menu)

expand codeexpand code
加载中
ZhejiangHangzhou

省市联动是典型的例子。

推荐使用 Cascader 组件。

expand codeexpand code
加载中

The selected option's age is 22


Jack

ngModel 取到的值为选中 nz-optionnzValue 值,当 nzValue 传入为一个对象时,ngModel 获取的值也是一个对象,compareWith 的用法参见 这里.

expand codeexpand code
加载中
 Select users

一个带有远程搜索,节流控制,请求时序控制,加载状态的多选示例。

expand codeexpand code
加载中
 Inserted are removed

通过 nzHide 隐藏下拉列表中已选择的选项。

expand codeexpand code
加载中
Select users

一个带有下拉加载远程数据的例子。

expand codeexpand code
加载中
a10
c12
 

组件使用了虚拟滚动技术,可以同时处理大量数据。

expand codeexpand code
加载中
Select OS

 Select OS

通过 nzCustomTemplate 自定义 nz-select 显示的内容。

expand codeexpand code
加载中

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

expand codeexpand code
加载中
a10
c12
 
2 / 3

你可以通过设置 nzMaxMultipleCount 约束最多可选中的数量,当超出限制时会变成禁止选中状态。

expand codeexpand code
加载中


a10

a10

a10
c12
 


a10
c12
tag
 

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

expand codeexpand code
加载中
Lucy

nz-option-group 进行选项分组。

expand codeexpand code
加载中
 automatic tokenization

试下复制 露西,杰克 到输入框里。只在 tags 和 multiple 模式下可用。

expand codeexpand code
加载中
custom dropdown render

使用 nzDropdownRender 对下拉菜单进行自由扩展。

expand codeexpand code
加载中
Select OS

通过 nzCustomContent 自定义下拉菜单选项显示的内容。

expand codeexpand code
加载中
Default 01
Default 02
 


Default Value

当需要显示默认值,同时默认值又不在选项列表中时,可以使用 nzHidenz-option 中将默认选项隐藏

expand codeexpand code
加载中
LucyLucy

无边框样式。

expand codeexpand code
加载中
LucyLucy

通过 nzOptions 直接传入选项内容

expand codeexpand code
加载中


HangZhou #310000

可以通过 placement 手动指定弹出的位置。

expand codeexpand code
加载中

API#

<nz-select>
  <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
</nz-select>

nz-select#

参数说明类型默认值全局配置
[nzId]组件内部 input 的 id 值string-
[ngModel]当前选中的 nz-option 的 nzValue 值,可双向绑定,当 nzModemultipletags 时,ngModel 为数组any | any[]-
[compareWith]SelectControlValueAccessor 相同(o1: any, o2: any) => boolean(o1: any, o2: any) => o1===o2
[nzAutoClearSearchValue]是否在选中项后清空搜索框,只在 modemultipletags 时有效。booleantrue
[nzAllowClear]支持清除booleanfalse
[nzBackdrop]浮层是否应带有背景板booleanfalse
[nzBorderless]是否无边框booleanfalse
[nzOpen]下拉菜单是否打开,可双向绑定booleanfalse
[nzAutoFocus]默认获取焦点booleanfalse
[nzDisabled]是否禁用booleanfalse
[nzDropdownClassName]下拉菜单的 className 属性string | string[]-
[nzDropdownMatchSelectWidth]下拉菜单和选择器同宽booleantrue
[nzDropdownStyle]下拉菜单的 style 属性object-
[nzCustomTemplate]自定义选择框的 Template 内容TemplateRef<{ $implicit: NzOptionComponent }>-
[nzServerSearch]是否使用服务端搜索,当为 true 时,将不再在前端对 nz-option 进行过滤booleanfalse
[nzFilterOption]是否根据输入项进行筛选。当其为一个函数时,会接收 inputValueoption 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false(input?: string, option?: NzOptionComponent) => boolean;-
[nzMaxMultipleCount]最多选中多少个标签numberInfinity
[nzMode]设置 nz-select 的模式'multiple' | 'tags' | 'default''default'
[nzNotFoundContent]当下拉列表为空时显示的内容string | TemplateRef<void>-
[nzPlaceHolder]选择框默认文字string-
[nzShowArrow]是否显示下拉小箭头boolean单选为 true,多选为 false
[nzShowSearch]使单选模式可搜索booleanfalse
[nzSize]选择框大小'large' | 'small' | 'default''default'
[nzStatus]设置校验状态'error' | 'warning'-
[nzSuffixIcon]自定义的选择框后缀图标TemplateRef<any> | string-
[nzRemoveIcon]自定义的多选框清除图标TemplateRef<any>-
[nzClearIcon]自定义的多选框清空图标TemplateRef<any>-
[nzMenuItemSelectedIcon]自定义当前选中的条目图标TemplateRef<any>-
[nzTokenSeparators]在 tags 和 multiple 模式下自动分词的分隔符string[][]
[nzLoading]加载中状态booleanfalse
[nzMaxTagCount]最多显示多少个 tagnumber-
[nzMaxTagPlaceholder]隐藏 tag 时显示的内容TemplateRef<{ $implicit: any[] }>-
[nzOptions]option 列表,可以取代 nz-option,用法参见例子Array<{ label: string | number | TemplateRef<any>; value: any; key?: string | number; disabled?: boolean; hide?: boolean; groupLabel?: string | TemplateRef<any>;}>-
[nzOptionHeightPx]下拉菜单中每个 Option 的高度number32
[nzOptionOverflowSize]下拉菜单中最多展示的 Option 个数,超出部分滚动number8
[nzSelectOnTab]允许使用 TAB 键选择项目booleanfalse
(ngModelChange)选中的 nz-option 发生变化时,调用此函数EventEmitter<any[]>-
(nzOpenChange)下拉菜单打开状态变化回调EventEmitter<boolean>-
(nzScrollToBottom)下拉列表滚动到底部的回调EventEmitter<any>-
(nzOnSearch)文本框值变化时回调EventEmitter<string>-
(nzFocus)focus 时回调EventEmitter<any>-
(nzBlur)blur 时回调EventEmitter<any>-

nz-option#

参数说明类型默认值
[nzDisabled]是否禁用booleanfalse
[nzTitle]选项上的原生 title 提示string | number-
[nzLabel]选中该 nz-option 后,nz-select 中显示的文字string | number-
[nzValue]nz-select 中 ngModel 的值any-
[nzKey]nz-select 中 ngModel 的值string | number-
[nzHide]是否在选项列表中隐藏该选项booleanfalse
[nzCustomContent]是否自定义在下拉菜单中的 Template 内容,当为 true 时,nz-option 包裹的内容将直接渲染在下拉菜单中booleanfalse

nz-option-group#

参数说明类型默认值
[nzLabel]组名string | number | TemplateRef<void>-

方法#

nz-select#

名称说明
blur()取消焦点
focus()获取焦点