Cascader级联选择

级联选择框。

何时使用

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

单独引入此组件

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

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

代码演示

Cascader级联选择 - 图1

基本

省市区级联。

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

Cascader级联选择 - 图2

可以自定义显示

切换按钮和结果分开。

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

Cascader级联选择 - 图3

禁用选项

通过指定 options 里的 disabled 字段。

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

Cascader级联选择 - 图4

大小

不同大小的级联选择器。

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

Cascader级联选择 - 图5

响应表单

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

  1. // tslint:disable:no-any
  2. import { Component } from '@angular/core';
  3. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  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. ];
  45. @Component({
  46. selector: 'nz-demo-cascader-reactive-form',
  47. template: `
  48. <form [formGroup]="form" novalidate>
  49. <nz-cascader [nzOptions]="nzOptions" (nzChange)="onChanges($event)" [formControlName]="'name'"> </nz-cascader>
  50. </form>
  51. <br />
  52. <button nz-button (click)="reset()">Reset</button>
  53. <button nz-button (click)="submit()">Submit</button>
  54. `,
  55. styles: [
  56. `
  57. .ant-cascader-picker {
  58. width: 300px;
  59. }
  60. button {
  61. margin-right: 8px;
  62. }
  63. `
  64. ]
  65. })
  66. export class NzDemoCascaderReactiveFormComponent {
  67. form: FormGroup;
  68. nzOptions = options;
  69. constructor(private fb: FormBuilder) {
  70. this.createForm();
  71. }
  72. private createForm(): void {
  73. this.form = this.fb.group({
  74. name: [null, Validators.required]
  75. });
  76. }
  77. reset(): void {
  78. this.form.reset();
  79. console.log(this.form.value);
  80. }
  81. submit(): void {
  82. console.log(this.form.value);
  83. }
  84. onChanges(values: any): void {
  85. console.log(values);
  86. }
  87. }

Cascader级联选择 - 图6

指定选择

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

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

Cascader级联选择 - 图7

搜索

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

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

Cascader级联选择 - 图8

默认值与延迟加载

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

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

Cascader级联选择 - 图9

自定义字段名

自定义字段名。

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

Cascader级联选择 - 图10

默认值

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

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

Cascader级联选择 - 图11

移入展开

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

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

Cascader级联选择 - 图12

选择即改变

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

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

Cascader级联选择 - 图13

自定义已选项

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

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

Cascader级联选择 - 图14

动态加载选项

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

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

Cascader级联选择 - 图15

模态窗口

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

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

Cascader级联选择 - 图16

鼠标移入触发

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

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

Cascader级联选择 - 图17

默认值与异步列表

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

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

API

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

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