Cascader 级联选择

级联选择框。

何时使用 #

  • 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。

  • 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。

  • 比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。

代码演示

省市区级联。

切换按钮和结果分开。

通过指定 nzOptions 里的 disabled 字段。

不同大小的级联选择器。

默认值通过数组的方式指定。

通过移入展开下级菜单,点击完成选择。

这种交互允许只选中父级选项。设置 nzChangeOnSelect 或者 nzChangeOn

例如给最后一项加上邮编链接。

使用事件 nzLoad 实现动态加载选项。

创建响应式表单组件,并通过 reset() 方法重置数值。

API

nz-cascader

参数 说明 类型 双向绑定 默认值
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