级联选择框。
需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。
从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。
比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。
省市区级联。
切换按钮和结果分开。
通过指定 nzOptions 里的 disabled
字段。
不同大小的级联选择器。
默认值通过数组的方式指定。
通过移入展开下级菜单,点击完成选择。
这种交互允许只选中父级选项。设置 nzChangeOnSelect
或者 nzChangeOn
。
例如给最后一项加上邮编链接。
使用事件 nzLoad
实现动态加载选项。
创建响应式表单组件,并通过 reset()
方法重置数值。
参数 | 说明 | 类型 | 双向绑定 | 默认值 |
---|---|---|---|---|
ngModel | 默认值,直接提供数组 | Array | 是 | - |
nzSize | 输入框大小,large 高度为 32px,small 为 22px,默认是 28px |
string | 否 | `default` |
nzDisabled | 禁用 | bool | 否 | false |
nzPlaceHolder | 输入框的默认文字 | string | 否 | 'Please select' |
nzShowInput | 显示输入框。设置为false 可隐藏输入框,但需要增加自定义显示内容。 |
bool | 否 | true |
nzShowSearch | 是否支持搜索 | bool | 否 | false |
nzAllowClear | 是否显示清除按钮 | bool | 否 | true |
nzClearText | 清除按钮的标题 | string | 否 | 'Clear' |
nzShowArrow | 是否显示箭头 | bool | 否 | true |
nzPopupClassName | 弹出菜单的自定义样式 | string | 否 | - |
nzColumnClassName | 弹出菜单中数据列的自定义样式 | string | 否 | - |
nzOptions | 初始化列数据,用于第一列的数据,子列通过选项的 children 加载,或者通过 nzLoad 事件异步加载。 |
Array | 否 | - |
nzEnableCache | 是否缓存异步加载的数据,若每次异步加载的数据都是变化的,需将该值设置为 false | bool | 否 | true |
nzExpandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | 否 | 'click' |
nzChangeOnSelect | 当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示 | bool | 否 | false |
nzChangeOn | 可通过自定义的函数来判断点击菜单选项是否应该发生变化,当函数返回 true 时,将发生变化。函数说明:(option: CascaderOption, level: number): boolean | Function | 否 | - |
nzTriggerAction | 触发菜单出现的行为,可选Array<'click' | 'hover'> | string | 否 | ['click'] |
nzDisplayRender | 选择后展示的渲染函数。函数说明:(label: string[], selectedOptions: CascaderOption[]) => string | Function | 否 | label => label.join(' / ') |
nzValueProperty | 值value 的属性名称 |
string | 否 | 'value' |
nzLabelProperty | 值label 的属性名称 |
string | 否 | 'label' |
nzVisibleChange | 菜单实现或隐藏事件,参数为:(visible: boolean) | Event | 否 | - |
nzChange | 选项值变更事件,参数为:(value: any[]) | Event | 否 | - |
nzSelectionChange | 选项变更事件,参数为:(options: CascaderOption[]) | Event | 否 | - |
nzSelect | 选项被选中事件,参数为:({{'{'}} option: CascaderOption, index: number {{'}'}})。选项被选中,不代表值会发生变化。 | Event | 否 | - |
nzLoad | 异步加载事件,参数为:({{'{'}} option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void {{'}'}})。 | Event | 否 | - |
nzClear | 内容被清空事件,参数为:()。 | Event | 否 | - |
注意,如果需要获得中国省市区数据,可以参考 china-division 。