Select选择器

下拉选择器。

何时使用#

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

代码演示

LucyLucyLucyLucy

基本使用。

expand codeexpand code
加载中
a10
c12
[object Object]

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

expand codeexpand code
加载中
[object Object]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
加载中
[object Object]Select users

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

expand codeexpand code
加载中
[object Object]Inserted are removed

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

expand codeexpand code
加载中
Select users

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

expand codeexpand code
加载中
a10
c12
[object Object]

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

expand codeexpand code
加载中
Select OS

[object Object]Select OS

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中


a10

a10

a10
c12
[object Object]


a10
c12
tag
[object Object]

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

expand codeexpand code
加载中
Lucy

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

expand codeexpand code
加载中
[object Object]automatic tokenization

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

expand codeexpand code
加载中
custom dropdown render

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

expand codeexpand code
加载中
Select OS

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

expand codeexpand code
加载中
Default 01
Default 02
[object Object]


Default Value

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

expand codeexpand code
加载中
LucyLucy

无边框样式。

expand codeexpand code
加载中
LucyLucy

通过 nzOptions 直接传入选项内容

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-
[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; disabled?: boolean; hide?: boolean; groupLabel?: string | TemplateRef<any>;}>-
[nzOptionHeightPx]下拉菜单中每个 Option 的高度number32
[nzOptionOverflowSize]下拉菜单中最多展示的 Option 个数,超出部分滚动number8
(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
[nzLabel]选中该 nz-option 后,nz-select 中显示的文字string | number-
[nzValue]nz-select 中 ngModel 的值any-
[nzHide]是否在选项列表中隐藏该选项booleanfalse
[nzCustomContent]是否自定义在下拉菜单中的 Template 内容,当为 true 时,nz-option 包裹的内容将直接渲染在下拉菜单中booleanfalse

nz-option-group#

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

方法#

nz-select#

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