ng-ytl-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
315 lines (297 loc) • 11.1 kB
HTML
<article>
<section class="markdown"><h1>Cascader 级联选择</h1>
<section class="markdown"><p>级联选择框。</p>
<h2 id="何时使用"><span>何时使用</span>
<a class="anchor">#</a>
</h2>
<ul>
<li><p>需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。</p></li>
<li><p>从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。</p></li>
<li><p>比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。</p></li>
</ul>
</section>
<h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
</section>
<div nz-row [nzGutter]="8">
<div nz-col [nzSpan]="12">
<nz-code-box [nzTitle]="'基本用法'" id="components-cascader-demo-basic" [nzCode]="NzDemoCascaderBasicCode">
<nz-demo-cascader-basic demo></nz-demo-cascader-basic>
<div intro>
<p>省市区级联。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'可以自定义显示'" id="components-cascader-demo-custom-trigger" [nzCode]="NzDemoCascaderCustomTriggerCode">
<nz-demo-cascader-custom-trigger demo></nz-demo-cascader-custom-trigger>
<div intro>
<p>切换按钮和结果分开。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'禁用选项'" id="components-cascader-demo-disabled" [nzCode]="NzDemoCascaderDisabledCode">
<nz-demo-cascader-disabled demo></nz-demo-cascader-disabled>
<div intro>
<p>通过指定 nzOptions 里的 <code>disabled</code> 字段。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'大小'" id="components-cascader-demo-size" [nzCode]="NzDemoCascaderSizeCode">
<nz-demo-cascader-size demo></nz-demo-cascader-size>
<div intro>
<p>不同大小的级联选择器。</p>
</div>
</nz-code-box>
</div>
<div nz-col [nzSpan]="12">
<nz-code-box [nzTitle]="'默认值'" id="components-cascader-demo-default-value" [nzCode]="NzDemoCascaderDefaultValueCode">
<nz-demo-cascader-default-value demo></nz-demo-cascader-default-value>
<div intro>
<p>默认值通过数组的方式指定。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'移入展开'" id="components-cascader-demo-hover" [nzCode]="NzDemoCascaderHoverCode">
<nz-demo-cascader-hover demo></nz-demo-cascader-hover>
<div intro>
<p>通过移入展开下级菜单，点击完成选择。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'选择即改变'" id="components-cascader-demo-change-on-select" [nzCode]="NzDemoCascaderChangeOnSelectCode">
<nz-demo-cascader-change-on-select demo></nz-demo-cascader-change-on-select>
<div intro>
<p>这种交互允许只选中父级选项。设置 <code>nzChangeOnSelect</code> 或者 <code>nzChangeOn</code> 。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'自定义已选项'" id="components-cascader-demo-custom-render" [nzCode]="NzDemoCascaderCustomRenderCode">
<nz-demo-cascader-custom-render demo></nz-demo-cascader-custom-render>
<div intro>
<p>例如给最后一项加上邮编链接。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'动态加载选项'" id="components-cascader-demo-lazy" [nzCode]="NzDemoCascaderLazyCode">
<nz-demo-cascader-lazy demo></nz-demo-cascader-lazy>
<div intro>
<p>使用事件 <code>nzLoad</code> 实现动态加载选项。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'响应式表单'" id="components-cascader-demo-reactive-form" [nzCode]="NzDemoCascaderReactiveFormCode">
<nz-demo-cascader-reactive-form demo></nz-demo-cascader-reactive-form>
<div intro>
<p>创建响应式表单组件，并通过 <code>reset()</code> 方法重置数值。</p>
</div>
</nz-code-box>
</div>
</div>
<section class="markdown api-container">
<h2 id="API"><span>API</span>
<!-- <a class="anchor">#</a> -->
</h2>
<h3 id="Cascader"><span>nz-cascader</span>
<!-- <a class="anchor">#</a> -->
</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>双向绑定</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>ngModel</td>
<td>默认值，直接提供数组</td>
<td>Array</td>
<td>是</td>
<td>-</td>
</tr>
<tr>
<td>nzSize</td>
<td>输入框大小，<code>large</code> 高度为 32px，<code>small</code> 为 22px，默认是 28px</td>
<td>string</td>
<td>否</td>
<td>`default`</td>
</tr>
<tr>
<td>nzDisabled</td>
<td>禁用</td>
<td>bool</td>
<td>否</td>
<td>false</td>
</tr>
<tr>
<td>nzPlaceHolder</td>
<td>输入框的默认文字</td>
<td>string</td>
<td>否</td>
<td>'Please select'</td>
</tr>
<tr>
<td>nzShowInput</td>
<td>显示输入框。设置为<code>false</code>可隐藏输入框，但需要增加自定义显示内容。</td>
<td>bool</td>
<td>否</td>
<td>true</td>
</tr>
<tr>
<td>nzShowSearch</td>
<td>是否支持搜索</td>
<td>bool</td>
<td>否</td>
<td>false</td>
</tr>
<tr>
<td>nzAllowClear</td>
<td>是否显示清除按钮</td>
<td>bool</td>
<td>否</td>
<td>true</td>
</tr>
<tr>
<td>nzClearText</td>
<td>清除按钮的标题</td>
<td>string</td>
<td>否</td>
<td>'Clear'</td>
</tr>
<tr>
<td>nzShowArrow</td>
<td>是否显示箭头</td>
<td>bool</td>
<td>否</td>
<td>true</td>
</tr>
<tr>
<td>nzPopupClassName</td>
<td>弹出菜单的自定义样式</td>
<td>string</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzColumnClassName</td>
<td>弹出菜单中数据列的自定义样式</td>
<td>string</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzOptions</td>
<td>初始化列数据，用于第一列的数据，子列通过选项的 <code>children</code> 加载，或者通过 <code>nzLoad</code>事件异步加载。 </td>
<td>Array</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzEnableCache</td>
<td>是否缓存异步加载的数据，若每次异步加载的数据都是变化的，需将该值设置为 false</td>
<td>bool</td>
<td>否</td>
<td>true</td>
</tr>
<tr>
<td>nzExpandTrigger</td>
<td>次级菜单的展开方式，可选 'click' 和 'hover'</td>
<td>string</td>
<td>否</td>
<td>'click'</td>
</tr>
<tr>
<td>nzChangeOnSelect</td>
<td>当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示</td>
<td>bool</td>
<td>否</td>
<td>false</td>
</tr>
<tr>
<td>nzChangeOn</td>
<td>可通过自定义的函数来判断点击菜单选项是否应该发生变化，当函数返回 true 时，将发生变化。函数说明：(option: CascaderOption, level: number): boolean</td>
<td>Function</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzTriggerAction</td>
<td>触发菜单出现的行为，可选Array<'click' | 'hover'></td>
<td>string</td>
<td>否</td>
<td>['click']</td>
</tr>
<tr>
<td>nzDisplayRender</td>
<td>选择后展示的渲染函数。函数说明：(label: string[], selectedOptions: CascaderOption[]) => string</td>
<td>Function</td>
<td>否</td>
<td><code>label => label.join(' / ')</code></td>
</tr>
<tr>
<td>nzValueProperty</td>
<td>值<code>value</code>的属性名称</td>
<td>string</td>
<td>否</td>
<td>'value'</td>
</tr>
<tr>
<td>nzLabelProperty</td>
<td>值<code>label</code>的属性名称</td>
<td>string</td>
<td>否</td>
<td>'label'</td>
</tr>
<tr>
<td>nzVisibleChange</td>
<td>菜单实现或隐藏事件，参数为：(visible: boolean)</td>
<td>Event</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzChange</td>
<td>选项值变更事件，参数为：(value: any[])</td>
<td>Event</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzSelectionChange</td>
<td>选项变更事件，参数为：(options: CascaderOption[])</td>
<td>Event</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzSelect</td>
<td>选项被选中事件，参数为：({{'{'}} option: CascaderOption, index: number {{'}'}})。选项被选中，不代表值会发生变化。</td>
<td>Event</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzLoad</td>
<td>异步加载事件，参数为：({{'{'}} option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void {{'}'}})。</td>
<td>Event</td>
<td>否</td>
<td>-</td>
</tr>
<tr>
<td>nzClear</td>
<td>内容被清空事件，参数为：()。</td>
<td>Event</td>
<td>否</td>
<td>-</td>
</tr>
</tbody>
</table>
<style>
.ant-cascader-picker {
width: 250px;
}
</style>
<blockquote>
<p>
注意，如果需要获得中国省市区数据，可以参考
<a href="https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17">
china-division
</a> 。
</p>
</blockquote>
</section>
</article>