• Cascader级联选择
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • nz-cascadercomponent
        • 方法

    Cascader级联选择

    级联选择框。

    何时使用

    • 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
    • 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
    • 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

    代码演示

    Cascader级联选择 - 图1

    基本

    省市区级联。

    1. // tslint:disable:no-any
    2. import { Component, OnInit } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. const otherOptions = [
    47.   {
    48.     value: 'fujian',
    49.     label: 'Fujian',
    50.     children: [
    51.       {
    52.         value: 'xiamen',
    53.         label: 'Xiamen',
    54.         children: [
    55.           {
    56.             value: 'Kulangsu',
    57.             label: 'Kulangsu',
    58.             isLeaf: true
    59.           }
    60.         ]
    61.       }
    62.     ]
    63.   },
    64.   {
    65.     value: 'guangxi',
    66.     label: 'Guangxi',
    67.     children: [
    68.       {
    69.         value: 'guilin',
    70.         label: 'Guilin',
    71.         children: [
    72.           {
    73.             value: 'Lijiang',
    74.             label: 'Li Jiang River',
    75.             isLeaf: true
    76.           }
    77.         ]
    78.       }
    79.     ]
    80.   }
    81. ];
    83. @Component({
    84.   selector: 'nz-demo-cascader-basic',
    85.   template: `
    86.     <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"> </nz-cascader>
    87.     &nbsp;
    88.     <a href="javascript:;" (click)="changeNzOptions()" class="change-options">
    89.       Change Options
    90.     </a>
    91.   `,
    92.   styles: [
    93.     `
    94.       .ant-cascader-picker {
    95.         width: 300px;
    96.       }
    97.       .change-options {
    98.         display: inline-block;
    99.         font-size: 12px;
    100.         margin-top: 8px;
    101.       }
    102.     `
    103.   ]
    104. })
    105. export class NzDemoCascaderBasicComponent implements OnInit {
    106.   nzOptions: any[] | null = null;
    107.   values: any[] | null = null;
    109.   ngOnInit(): void {
    110.     setTimeout(() => {
    111.       this.nzOptions = options;
    112.     }, 100);
    113.   }
    115.   changeNzOptions(): void {
    116.     if (this.nzOptions === options) {
    117.       this.nzOptions = otherOptions;
    118.     } else {
    119.       this.nzOptions = options;
    120.     }
    121.   }
    123.   onChanges(values: any): void {
    124.     console.log(values, this.values);
    125.   }
    126. }

    Cascader级联选择 - 图2

    可以自定义显示

    切换按钮和结果分开。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. @Component({
    47.   selector: 'nz-demo-cascader-trigger',
    48.   template: `
    49.     {{ text }}
    50.     <nz-cascader
    51.       [nzShowInput]="false"
    52.       [nzOptions]="nzOptions"
    53.       [(ngModel)]="values"
    54.       (ngModelChange)="onChanges($event)"
    55.       (nzSelectionChange)="onSelectionChange($event)"
    56.     >
    57.       <a href="javascript: void(0)">Change city</a>
    58.     </nz-cascader>
    59.   `,
    60.   styles: [
    61.     `
    62.       .ant-cascader-picker {
    63.         width: 300px;
    64.       }
    65.     `
    66.   ]
    67. })
    68. export class NzDemoCascaderTriggerComponent {
    69.   nzOptions = options;
    70.   values: any[] | null = null;
    71.   text = 'Unselect';
    73.   onChanges(values: any): void {
    74.     console.log(values, this.values);
    75.   }
    77.   onSelectionChange(selectedOptions: any[]): void {
    78.     this.text = selectedOptions.map(o => o.label).join(', ');
    79.   }
    80. }

    Cascader级联选择 - 图3

    禁用选项

    通过指定 options 里的 disabled 字段。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     disabled: true,
    31.     children: [
    32.       {
    33.         value: 'nanjing',
    34.         label: 'Nanjing',
    35.         children: [
    36.           {
    37.             value: 'zhonghuamen',
    38.             label: 'Zhong Hua Men',
    39.             isLeaf: true
    40.           }
    41.         ]
    42.       }
    43.     ]
    44.   }
    45. ];
    47. @Component({
    48.   selector: 'nz-demo-cascader-disabled',
    49.   template: `
    50.     <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"> </nz-cascader>
    51.   `,
    52.   styles: [
    53.     `
    54.       .ant-cascader-picker {
    55.         width: 300px;
    56.       }
    57.     `
    58.   ]
    59. })
    60. export class NzDemoCascaderDisabledComponent {
    61.   nzOptions = options;
    62.   values: any[] | null = null;
    64.   onChanges(values: any): void {
    65.     console.log(values, this.values);
    66.   }
    67. }

    Cascader级联选择 - 图4

    大小

    不同大小的级联选择器。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. @Component({
    47.   selector: 'nz-demo-cascader-size',
    48.   template: `
    49.     <nz-cascader [nzSize]="'large'" [nzOptions]="nzOptions" [(ngModel)]="value1" (ngModelChange)="onChanges($event)">
    50.     </nz-cascader>
    51.     <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="value2" (ngModelChange)="onChanges($event)"> </nz-cascader>
    52.     <nz-cascader [nzSize]="'small'" [nzOptions]="nzOptions" [(ngModel)]="value3" (ngModelChange)="onChanges($event)">
    53.     </nz-cascader>
    54.   `,
    55.   styles: [
    56.     `
    57.       .ant-cascader-picker {
    58.         width: 300px;
    59.         margin-bottom: 8px;
    60.       }
    61.     `
    62.   ]
    63. })
    64. export class NzDemoCascaderSizeComponent {
    65.   nzOptions = options;
    66.   value1: any[] | null = null;
    67.   value2: any[] | null = null;
    68.   value3: any[] | null = null;
    70.   onChanges(values: any): void {
    71.     console.log(values);
    72.   }
    73. }

    Cascader级联选择 - 图5

    响应表单

    通过表单的重置功能清空已选择的值。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    3. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    5. const options = [
    6.   {
    7.     value: 'zhejiang',
    8.     label: 'Zhejiang',
    9.     children: [
    10.       {
    11.         value: 'hangzhou',
    12.         label: 'Hangzhou',
    13.         children: [
    14.           {
    15.             value: 'xihu',
    16.             label: 'West Lake',
    17.             isLeaf: true
    18.           }
    19.         ]
    20.       },
    21.       {
    22.         value: 'ningbo',
    23.         label: 'Ningbo',
    24.         isLeaf: true
    25.       }
    26.     ]
    27.   },
    28.   {
    29.     value: 'jiangsu',
    30.     label: 'Jiangsu',
    31.     children: [
    32.       {
    33.         value: 'nanjing',
    34.         label: 'Nanjing',
    35.         children: [
    36.           {
    37.             value: 'zhonghuamen',
    38.             label: 'Zhong Hua Men',
    39.             isLeaf: true
    40.           }
    41.         ]
    42.       }
    43.     ]
    44.   }
    45. ];
    47. @Component({
    48.   selector: 'nz-demo-cascader-reactive-form',
    49.   template: `
    50.     <form [formGroup]="form" novalidate>
    51.       <nz-cascader [nzOptions]="nzOptions" (nzChange)="onChanges($event)" [formControlName]="'name'"> </nz-cascader>
    52.     </form>
    53.     <br />
    54.     <button nz-button (click)="reset()">Reset</button>
    55.     <button nz-button (click)="submit()">Submit</button>
    56.   `,
    57.   styles: [
    58.     `
    59.       .ant-cascader-picker {
    60.         width: 300px;
    61.       }
    63.       button {
    64.         margin-right: 8px;
    65.       }
    66.     `
    67.   ]
    68. })
    69. export class NzDemoCascaderReactiveFormComponent {
    70.   form: FormGroup;
    71.   nzOptions = options;
    73.   constructor(private fb: FormBuilder) {
    74.     this.createForm();
    75.   }
    77.   private createForm(): void {
    78.     this.form = this.fb.group({
    79.       name: [null, Validators.required]
    80.     });
    81.   }
    83.   reset(): void {
    84.     this.form.reset();
    85.     console.log(this.form.value);
    86.   }
    88.   submit(): void {
    89.     console.log(this.form.value);
    90.   }
    92.   onChanges(values: any): void {
    93.     console.log(values);
    94.   }
    95. }

    Cascader级联选择 - 图6

    指定选择

    通过函数来判断选项是否可以选择。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         children: [
    24.           {
    25.             value: 'dongqianlake',
    26.             label: 'Dongqian Lake',
    27.             isLeaf: true
    28.           }
    29.         ]
    30.       }
    31.     ]
    32.   },
    33.   {
    34.     value: 'jiangsu',
    35.     label: 'Jiangsu',
    36.     children: [
    37.       {
    38.         value: 'nanjing',
    39.         label: 'Nanjing',
    40.         children: [
    41.           {
    42.             value: 'zhonghuamen',
    43.             label: 'Zhong Hua Men',
    44.             isLeaf: true
    45.           }
    46.         ]
    47.       }
    48.     ]
    49.   }
    50. ];
    52. @Component({
    53.   selector: 'nz-demo-cascader-change-on-function',
    54.   template: `
    55.     <nz-cascader
    56.       [nzChangeOn]="validate"
    57.       [nzOptions]="nzOptions"
    58.       [(ngModel)]="values"
    59.       (ngModelChange)="onChanges($event)"
    60.     >
    61.     </nz-cascader>
    62.   `,
    63.   styles: [
    64.     `
    65.       .ant-cascader-picker {
    66.         width: 300px;
    67.       }
    68.     `
    69.   ]
    70. })
    71. export class NzDemoCascaderChangeOnFunctionComponent {
    72.   nzOptions = options;
    73.   values: any[] | null = null;
    75.   onChanges(values: any): void {
    76.     console.log(values, this.values);
    77.   }
    79.   validate(option: any, _index: number): boolean {
    80.     const value = option.value;
    81.     return ['hangzhou', 'xihu', 'nanjing', 'zhonghuamen'].indexOf(value) >= 0;
    82.   }
    83. }

    Cascader级联选择 - 图7

    搜索

    可以直接搜索选项并选择。

    1. // tslint:disable:no-any
    2. import { Component, OnInit } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true,
    24.         disabled: true
    25.       }
    26.     ]
    27.   },
    28.   {
    29.     value: 'jiangsu',
    30.     label: 'Jiangsu',
    31.     children: [
    32.       {
    33.         value: 'nanjing',
    34.         label: 'Nanjing',
    35.         children: [
    36.           {
    37.             value: 'zhonghuamen',
    38.             label: 'Zhong Hua Men',
    39.             isLeaf: true
    40.           }
    41.         ]
    42.       }
    43.     ]
    44.   }
    45. ];
    47. const otherOptions = [
    48.   {
    49.     value: 'fujian',
    50.     label: 'Fujian',
    51.     children: [
    52.       {
    53.         value: 'xiamen',
    54.         label: 'Xiamen',
    55.         children: [
    56.           {
    57.             value: 'Kulangsu',
    58.             label: 'Kulangsu',
    59.             isLeaf: true
    60.           }
    61.         ]
    62.       }
    63.     ]
    64.   },
    65.   {
    66.     value: 'guangxi',
    67.     label: 'Guangxi',
    68.     children: [
    69.       {
    70.         value: 'guilin',
    71.         label: 'Guilin',
    72.         children: [
    73.           {
    74.             value: 'Lijiang',
    75.             label: 'Li Jiang River',
    76.             isLeaf: true
    77.           }
    78.         ]
    79.       }
    80.     ]
    81.   }
    82. ];
    84. @Component({
    85.   selector: 'nz-demo-cascader-search',
    86.   template: `
    87.     <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" [nzShowSearch]="true" (ngModelChange)="onChanges($event)">
    88.     </nz-cascader>
    89.     &nbsp;
    90.     <a href="javascript:;" (click)="changeNzOptions()" class="change-options">
    91.       Change Options
    92.     </a>
    93.   `,
    94.   styles: [
    95.     `
    96.       .ant-cascader-picker {
    97.         width: 300px;
    98.       }
    99.       .change-options {
    100.         display: inline-block;
    101.         font-size: 12px;
    102.         margin-top: 8px;
    103.       }
    104.     `
    105.   ]
    106. })
    107. export class NzDemoCascaderSearchComponent implements OnInit {
    108.   nzOptions: any = null;
    109.   values: any[] | null = null;
    111.   ngOnInit(): void {
    112.     setTimeout(() => {
    113.       this.nzOptions = options;
    114.     }, 100);
    115.   }
    117.   changeNzOptions(): void {
    118.     if (this.nzOptions === options) {
    119.       this.nzOptions = otherOptions;
    120.     } else {
    121.       this.nzOptions = options;
    122.     }
    123.   }
    125.   onChanges(values: any): void {
    126.     console.log(values, this.values);
    127.   }
    128. }

    Cascader级联选择 - 图8

    默认值与延迟加载

    默认值通过数组的方式指定，但nzOptions没有赋值，通过nzLoadData函数延迟加载。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const provinces = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang'
    8.   },
    9.   {
    10.     value: 'jiangsu',
    11.     label: 'Jiangsu'
    12.   }
    13. ];
    15. const cities: { [key: string]: Array<{ value: string; label: string; isLeaf?: boolean }> } = {
    16.   zhejiang: [
    17.     {
    18.       value: 'hangzhou',
    19.       label: 'Hangzhou'
    20.     },
    21.     {
    22.       value: 'ningbo',
    23.       label: 'Ningbo',
    24.       isLeaf: true
    25.     }
    26.   ],
    27.   jiangsu: [
    28.     {
    29.       value: 'nanjing',
    30.       label: 'Nanjing'
    31.     }
    32.   ]
    33. };
    35. const scenicspots: { [key: string]: Array<{ value: string; label: string; isLeaf?: boolean }> } = {
    36.   hangzhou: [
    37.     {
    38.       value: 'xihu',
    39.       label: 'West Lake',
    40.       isLeaf: true
    41.     }
    42.   ],
    43.   nanjing: [
    44.     {
    45.       value: 'zhonghuamen',
    46.       label: 'Zhong Hua Men',
    47.       isLeaf: true
    48.     }
    49.   ]
    50. };
    52. @Component({
    53.   selector: 'nz-demo-cascader-default-value-and-lazyload',
    54.   template: `
    55.     <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"> </nz-cascader>
    56.   `,
    57.   styles: [
    58.     `
    59.       .ant-cascader-picker {
    60.         width: 300px;
    61.       }
    62.     `
    63.   ]
    64. })
    65. export class NzDemoCascaderDefaultValueAndLazyloadComponent {
    66.   values: any[] = ['zhejiang', 'hangzhou', 'xihu'];
    68.   onChanges(values: any): void {
    69.     console.log(values, this.values);
    70.   }
    72.   /** load data async execute by `nzLoadData` method */
    73.   loadData(node: any, index: number): PromiseLike<any> {
    74.     return new Promise(resolve => {
    75.       setTimeout(() => {
    76.         if (index < 0) {
    77.           // if index less than 0 it is root node
    78.           node.children = provinces;
    79.         } else if (index === 0) {
    80.           node.children = cities[node.value];
    81.         } else {
    82.           node.children = scenicspots[node.value];
    83.         }
    84.         resolve();
    85.       }, 1000);
    86.     });
    87.   }
    88. }

    Cascader级联选择 - 图9

    自定义字段名

    自定义字段名。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     code: 'zhejiang',
    7.     name: 'Zhejiang',
    8.     children: [
    9.       {
    10.         code: 'hangzhou',
    11.         name: 'Hangzhou',
    12.         children: [
    13.           {
    14.             code: 'xihu',
    15.             name: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         code: 'ningbo',
    22.         name: 'Ningbo',
    23.         children: [
    24.           {
    25.             code: 'dongqianlake',
    26.             name: 'Dongqian Lake',
    27.             isLeaf: true
    28.           }
    29.         ]
    30.       }
    31.     ]
    32.   },
    33.   {
    34.     code: 'jiangsu',
    35.     name: 'Jiangsu',
    36.     children: [
    37.       {
    38.         code: 'nanjing',
    39.         name: 'Nanjing',
    40.         children: [
    41.           {
    42.             code: 'zhonghuamen',
    43.             name: 'Zhong Hua Men',
    44.             isLeaf: true
    45.           }
    46.         ]
    47.       }
    48.     ]
    49.   }
    50. ];
    52. @Component({
    53.   selector: 'nz-demo-cascader-custom-field-names',
    54.   template: `
    55.     <nz-cascader
    56.       [nzChangeOn]="validate"
    57.       [nzOptions]="nzOptions"
    58.       [nzLabelProperty]="'name'"
    59.       [nzValueProperty]="'code'"
    60.       [nzShowSearch]="true"
    61.       [(ngModel)]="values"
    62.       (ngModelChange)="onChanges($event)"
    63.     >
    64.     </nz-cascader>
    65.   `,
    66.   styles: [
    67.     `
    68.       .ant-cascader-picker {
    69.         width: 300px;
    70.       }
    71.     `
    72.   ]
    73. })
    74. export class NzDemoCascaderCustomFieldNamesComponent {
    75.   nzOptions = options;
    76.   values: any[] | null = null;
    78.   onChanges(values: any): void {
    79.     console.log(values, this.values);
    80.   }
    82.   validate(option: any, _index: number): boolean {
    83.     const value = option.value;
    84.     return ['hangzhou', 'xihu', 'nanjing', 'zhonghuamen'].indexOf(value) >= 0;
    85.   }
    86. }

    Cascader级联选择 - 图10

    默认值

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

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. @Component({
    47.   selector: 'nz-demo-cascader-default-value',
    48.   template: `
    49.     <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"> </nz-cascader>
    50.   `,
    51.   styles: [
    52.     `
    53.       .ant-cascader-picker {
    54.         width: 300px;
    55.       }
    56.     `
    57.   ]
    58. })
    59. export class NzDemoCascaderDefaultValueComponent {
    60.   nzOptions = options;
    62.   values: any[] = ['zhejiang', 'hangzhou', 'xihu'];
    63.   /* // or like this:
    64.   values: any[] = [{
    65.     value: 'zhejiang',
    66.     label: 'Zhejiang'
    67.   }, {
    68.     value: 'hangzhou',
    69.     label: 'Hangzhou'
    70.   }, {
    71.     value: 'xihu',
    72.     label: 'West Lake'
    73.   }]; */
    75.   onChanges(values: any): void {
    76.     console.log(values, this.values);
    77.   }
    78. }

    Cascader级联选择 - 图11

    移入展开

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

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. @Component({
    47.   selector: 'nz-demo-cascader-hover',
    48.   template: `
    49.     <nz-cascader
    50.       [nzExpandTrigger]="'hover'"
    51.       [nzOptions]="nzOptions"
    52.       [(ngModel)]="values"
    53.       (ngModelChange)="onChanges($event)"
    54.     >
    55.     </nz-cascader>
    56.   `,
    57.   styles: [
    58.     `
    59.       .ant-cascader-picker {
    60.         width: 300px;
    61.       }
    62.     `
    63.   ]
    64. })
    65. export class NzDemoCascaderHoverComponent {
    66.   nzOptions = options;
    67.   values: any[] | null = null;
    69.   onChanges(values: any): void {
    70.     console.log(values, this.values);
    71.   }
    72. }

    Cascader级联选择 - 图12

    选择即改变

    这种交互允许只选中父级选项。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. @Component({
    47.   selector: 'nz-demo-cascader-change-on-select',
    48.   template: `
    49.     <nz-cascader nzChangeOnSelect [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)">
    50.     </nz-cascader>
    51.   `,
    52.   styles: [
    53.     `
    54.       .ant-cascader-picker {
    55.         width: 300px;
    56.       }
    57.     `
    58.   ]
    59. })
    60. export class NzDemoCascaderChangeOnSelectComponent {
    61.   nzOptions = options;
    62.   values: any[] | null = null;
    64.   onChanges(values: any): void {
    65.     console.log(values, this.values);
    66.   }
    67. }

    Cascader级联选择 - 图13

    自定义已选项

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

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             code: 752100,
    17.             isLeaf: true
    18.           }
    19.         ]
    20.       },
    21.       {
    22.         value: 'ningbo',
    23.         label: 'Ningbo',
    24.         code: '315000',
    25.         isLeaf: true
    26.       }
    27.     ]
    28.   },
    29.   {
    30.     value: 'jiangsu',
    31.     label: 'Jiangsu',
    32.     children: [
    33.       {
    34.         value: 'nanjing',
    35.         label: 'Nanjing',
    36.         children: [
    37.           {
    38.             value: 'zhonghuamen',
    39.             label: 'Zhong Hua Men',
    40.             code: 453400,
    41.             isLeaf: true
    42.           }
    43.         ]
    44.       }
    45.     ]
    46.   }
    47. ];
    49. @Component({
    50.   selector: 'nz-demo-cascader-custom-render',
    51.   template: `
    52.     <nz-cascader
    53.       [nzLabelRender]="renderTpl"
    54.       [nzOptions]="nzOptions"
    55.       [(ngModel)]="values"
    56.       (ngModelChange)="onChanges($event)"
    57.     >
    58.     </nz-cascader>
    60.     <ng-template #renderTpl let-labels="labels" let-selectedOptions="selectedOptions">
    61.       <ng-container *ngFor="let label of labels; let i = index; let isLast = last">
    62.         <span *ngIf="!isLast">{{ label }} / </span>
    63.         <span *ngIf="isLast">
    64.           {{ label }} (<a href="javascript:;" (click)="handleAreaClick($event, label, selectedOptions[i])">
    65.             {{ selectedOptions[i].code }} </a
    66.           >)
    67.         </span>
    68.       </ng-container>
    69.     </ng-template>
    70.   `,
    71.   styles: [
    72.     `
    73.       .ant-cascader-picker {
    74.         width: 300px;
    75.       }
    76.     `
    77.   ]
    78. })
    79. export class NzDemoCascaderCustomRenderComponent {
    80.   nzOptions = options;
    81.   values: any[] | null = null;
    83.   onChanges(values: any): void {
    84.     console.log(values, this.values);
    85.   }
    87.   handleAreaClick(e: Event, label: string, option: any): void {
    88.     e.preventDefault();
    89.     e.stopPropagation();
    90.     console.log('clicked "', label, '"', option);
    91.   }
    92. }

    Cascader级联选择 - 图14

    动态加载选项

    使用 nzLoadData 实现动态加载选项。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const provinces = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang'
    8.   },
    9.   {
    10.     value: 'jiangsu',
    11.     label: 'Jiangsu'
    12.   }
    13. ];
    15. const cities: { [key: string]: Array<{ value: string; label: string; isLeaf?: boolean }> } = {
    16.   zhejiang: [
    17.     {
    18.       value: 'hangzhou',
    19.       label: 'Hangzhou'
    20.     },
    21.     {
    22.       value: 'ningbo',
    23.       label: 'Ningbo',
    24.       isLeaf: true
    25.     }
    26.   ],
    27.   jiangsu: [
    28.     {
    29.       value: 'nanjing',
    30.       label: 'Nanjing'
    31.     }
    32.   ]
    33. };
    35. const scenicspots: { [key: string]: Array<{ value: string; label: string; isLeaf?: boolean }> } = {
    36.   hangzhou: [
    37.     {
    38.       value: 'xihu',
    39.       label: 'West Lake',
    40.       isLeaf: true
    41.     }
    42.   ],
    43.   nanjing: [
    44.     {
    45.       value: 'zhonghuamen',
    46.       label: 'Zhong Hua Men',
    47.       isLeaf: true
    48.     }
    49.   ]
    50. };
    52. @Component({
    53.   selector: 'nz-demo-cascader-lazy',
    54.   template: `
    55.     <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"> </nz-cascader>
    56.   `,
    57.   styles: [
    58.     `
    59.       .ant-cascader-picker {
    60.         width: 300px;
    61.       }
    62.     `
    63.   ]
    64. })
    65. export class NzDemoCascaderLazyComponent {
    66.   values: any[] | null = null;
    68.   onChanges(values: any): void {
    69.     console.log(values);
    70.   }
    72.   /** load data async execute by `nzLoadData` method */
    73.   loadData(node: any, index: number): PromiseLike<any> {
    74.     return new Promise(resolve => {
    75.       setTimeout(() => {
    76.         if (index < 0) {
    77.           // if index less than 0 it is root node
    78.           node.children = provinces;
    79.         } else if (index === 0) {
    80.           node.children = cities[node.value];
    81.         } else {
    82.           node.children = scenicspots[node.value];
    83.         }
    84.         resolve();
    85.       }, 1000);
    86.     });
    87.   }
    88. }

    Cascader级联选择 - 图15

    模态窗口

    在模态窗口中使用级联控件。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. @Component({
    47.   selector: 'nz-demo-cascader-modal',
    48.   template: `
    49.     <nz-modal
    50.       [(nzVisible)]="isVisible"
    51.       nzTitle="Please select"
    52.       (nzOnCancel)="handleCancel($event)"
    53.       (nzOnOk)="handleOk($event)"
    54.     >
    55.       <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"> </nz-cascader>
    56.     </nz-modal>
    58.     <button nz-button (click)="open()">Open Dialog</button>
    59.   `,
    60.   styles: [
    61.     `
    62.       .ant-cascader-picker {
    63.         width: 300px;
    64.       }
    65.     `
    66.   ]
    67. })
    68. export class NzDemoCascaderModalComponent {
    69.   nzOptions = options;
    70.   values: any[] | null = null;
    71.   isVisible = false;
    73.   onChanges(values: any): void {
    74.     console.log(values, this.values);
    75.   }
    77.   open(): void {
    78.     this.isVisible = true;
    79.   }
    81.   handleOk($event: MouseEvent): void {
    82.     console.log('Button ok clicked!', this.values, $event);
    83.     this.isVisible = false;
    84.   }
    86.   handleCancel($event: MouseEvent): void {
    87.     console.log('Button cancel clicked!', $event);
    88.     this.isVisible = false;
    89.   }
    90. }

    Cascader级联选择 - 图16

    鼠标移入触发

    鼠标移入触发显示菜单，移出隐藏菜单。

    1. // tslint:disable:no-any
    2. import { Component } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. @Component({
    47.   selector: 'nz-demo-cascader-trigger-action',
    48.   template: `
    49.     <nz-cascader
    50.       [nzTriggerAction]="'hover'"
    51.       [nzExpandTrigger]="'hover'"
    52.       [nzOptions]="nzOptions"
    53.       [(ngModel)]="values"
    54.       (ngModelChange)="onChanges($event)"
    55.     >
    56.     </nz-cascader>
    57.   `,
    58.   styles: [
    59.     `
    60.       .ant-cascader-picker {
    61.         width: 300px;
    62.       }
    63.     `
    64.   ]
    65. })
    66. export class NzDemoCascaderTriggerActionComponent {
    67.   nzOptions = options;
    68.   values: any[] | null = null;
    70.   onChanges(values: any): void {
    71.     console.log(values, this.values);
    72.   }
    73. }

    Cascader级联选择 - 图17

    默认值与异步列表

    默认值通过数组的方式指定，但nzOptions通过异步加载。

    1. // tslint:disable:no-any
    2. import { Component, OnInit } from '@angular/core';
    4. const options = [
    5.   {
    6.     value: 'zhejiang',
    7.     label: 'Zhejiang',
    8.     children: [
    9.       {
    10.         value: 'hangzhou',
    11.         label: 'Hangzhou',
    12.         children: [
    13.           {
    14.             value: 'xihu',
    15.             label: 'West Lake',
    16.             isLeaf: true
    17.           }
    18.         ]
    19.       },
    20.       {
    21.         value: 'ningbo',
    22.         label: 'Ningbo',
    23.         isLeaf: true
    24.       }
    25.     ]
    26.   },
    27.   {
    28.     value: 'jiangsu',
    29.     label: 'Jiangsu',
    30.     children: [
    31.       {
    32.         value: 'nanjing',
    33.         label: 'Nanjing',
    34.         children: [
    35.           {
    36.             value: 'zhonghuamen',
    37.             label: 'Zhong Hua Men',
    38.             isLeaf: true
    39.           }
    40.         ]
    41.       }
    42.     ]
    43.   }
    44. ];
    46. @Component({
    47.   selector: 'nz-demo-cascader-default-value-and-asyn-options',
    48.   template: `
    49.     <nz-cascader [(ngModel)]="values" [nzOptions]="nzOptions" (ngModelChange)="onChanges($event)"> </nz-cascader>
    50.   `,
    51.   styles: [
    52.     `
    53.       .ant-cascader-picker {
    54.         width: 300px;
    55.       }
    56.     `
    57.   ]
    58. })
    59. export class NzDemoCascaderDefaultValueAndAsynOptionsComponent implements OnInit {
    60.   nzOptions: any[] | null = null;
    61.   values: any[] = ['zhejiang', 'hangzhou', 'xihu'];
    63.   onChanges(values: any): void {
    64.     console.log(values, this.values);
    65.   }
    67.   ngOnInit(): void {
    68.     setTimeout(() => {
    69.       this.nzOptions = options;
    70.     }, 500);
    71.   }
    72. }

    API

    1. <nz-cascader [nzOptions]="options" [(ngModel)]="values"></nz-cascader>

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzCascaderModule } from 'ng-zorro-antd';

    nz-cascadercomponent

    参数说明类型默认值
    [ngModel]指定选中项any[]-
    [nzAllowClear]是否支持清除booleantrue
    [nzAutoFocus]是否自动聚焦，当存在输入框时booleanfalse
    [nzChangeOn]点击父级菜单选项时，可通过该函数判断是否允许值的变化function(option: any, index: number) => boolean-
    [nzChangeOnSelect]当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示booleanfalse
    [nzColumnClassName]自定义浮层列类名string-
    [nzDisabled]禁用booleanfalse
    [nzExpandTrigger]次级菜单的展开方式，可选 'click' 和 'hover''click'｜'hover''click'
    [nzMenuClassName]自定义浮层类名string-
    [nzMenuStyle]自定义浮层样式object-
    [nzNotFoundContent]当下拉列表为空时显示的内容string｜TemplateRef<void>-
    [nzLabelProperty]选项的显示值的属性名string'label'
    [nzLabelRender]选择后展示的渲染模板TemplateRef<any>-
    [nzLoadData]用于动态加载选项。如果提供了ngModel初始值，且未提供nzOptions值，则会立即触发动态加载。(option: any, index?: index) => PromiseLike<any>-
    [nzOptions]可选项数据源object[]-
    [nzPlaceHolder]输入框占位文本string'请选择'
    [nzShowArrow]是否显示箭头booleantrue
    [nzShowInput]显示输入框booleantrue
    [nzShowSearch]是否支持搜索，默认情况下对 label 进行全匹配搜索，不能和 [nzLoadData] 同时使用boolean｜NzShowSearchOptionsfalse
    [nzSize]输入框大小，可选 largedefaultsmall'large'｜'small'｜'default''default'
    [nzValueProperty]选项的实际值的属性名string'value'
    (ngModelChange)值发生变化时触发EventEmitter<any[]>-
    (nzClear)清空值时触发EventEmitter<void>-
    (nzVisibleChange)菜单浮层的显示/隐藏EventEmitter<boolean>-
    (nzSelect)选中菜单选项时触发EventEmitter<{option: any, index: number}>-
    (nzSelectionChange)选中菜单选项时触发EventEmitter<any[]>-

    nzShowSearch 为对象时需遵守 NzShowSearchOptions 接口：

    参数说明类型默认值
    filter可选，选择是否保留选项的过滤函数，每级菜单的选项都会被匹配(inputValue: string, path: CascaderOption[]): boolean-
    sorter可选，按照到每个最终选项的路径进行排序，默认按照原始数据的顺序(a: CascaderOption[], b: CascaderOption[], inputValue: string): number-

    方法

    名称描述
    blur()移除焦点
    focus()获取焦点
    closeMenu()隐藏菜单

    注意，如果需要获得中国省市区数据，可以参考 china-division。