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。