# 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 。