cascader 级联选择

一般用于省市区,公司层级,事物分类等。

注意事项

  • defaultformData 值始终应该保持一个数组,例如:城市级联可能只存储叶节点 value,此时需要手动处理并给出完整数据链 value 数组

数据源说明

静态

指一次性获取数据,数据来源于 asyncDataenum

实时

指每一次每一次选择会触发HTTP请求,数据来源于 asyncData;包含三个参数 (node: NzCascaderOption, index: number, me: CascaderWidget) => PromiseLike<any>,其中 me 表示当前小部件实例。

代码演示

cascader 级联选择 - 图1

基础样例

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { SFSchema, SFCascaderWidgetSchema } from '@delon/form';
  3. import { NzMessageService } from 'ng-zorro-antd/message';
  4. @Component({
  5. selector: 'form-cascader-simple',
  6. template: `
  7. <sf [schema]="schema" (formSubmit)="submit($event)"></sf>
  8. `,
  9. })
  10. export class FormCascaderSimpleComponent {
  11. schema: SFSchema = {
  12. properties: {
  13. static: {
  14. type: 'number',
  15. title: 'Static',
  16. enum: [
  17. {
  18. value: 110000,
  19. label: '北京',
  20. parent: 0,
  21. children: [
  22. {
  23. value: 110100,
  24. label: '北京市',
  25. parent: 110000,
  26. children: [
  27. {
  28. value: 110101,
  29. label: '东城区',
  30. parent: 110100,
  31. isLeaf: true,
  32. },
  33. {
  34. value: 110105,
  35. label: '朝阳区',
  36. parent: 110100,
  37. isLeaf: true,
  38. },
  39. ],
  40. },
  41. ],
  42. },
  43. ],
  44. ui: 'cascader',
  45. default: [110000, 110100, 110105],
  46. },
  47. async: {
  48. type: 'number',
  49. title: 'RealTime',
  50. ui: {
  51. widget: 'cascader',
  52. asyncData: (node, index) => {
  53. return new Promise(resolve => {
  54. setTimeout(() => {
  55. (node as any).children = [
  56. { value: 110000, label: '北京', parent: 0 },
  57. { value: 110100, label: '北京市', parent: 110000 },
  58. { value: 110101, label: '东城区', parent: 110100 },
  59. { value: 110105, label: '朝阳区', parent: 110100 },
  60. { value: 310000, label: '上海', parent: 0 },
  61. { value: 310100, label: '上海市', parent: 310000 },
  62. { value: 310101, label: '黄浦区', parent: 310100 },
  63. { value: 310104, label: '徐汇区', parent: 310100 },
  64. ].filter((w: any) => {
  65. w.isLeaf = index === 1;
  66. return w.parent === (node.value || 0);
  67. });
  68. resolve();
  69. }, 300);
  70. });
  71. },
  72. } as SFCascaderWidgetSchema,
  73. default: [110000, 110100, 110105],
  74. },
  75. },
  76. };
  77. constructor(public msg: NzMessageService) {}
  78. submit(value: any) {
  79. this.msg.success(JSON.stringify(value));
  80. }
  81. }

API

schema 属性

成员说明类型默认值
[enum]静态数据源SFSchemaEnumType[]-
[readOnly]禁用状态boolean-

ui 属性

成员说明类型默认值
[asyncData]异步静态数据源(node: NzCascaderOption, index: number, me: CascaderWidget) => PromiseLike<any>-
[size]大小,等同 nzSizestring-
[placeholder]在文字框中显示提示讯息string-
[showSearch]是否支持搜索boolfalse
[allowClear]是否显示清除按钮booltrue
[clearText]清除按钮的标题string清除
[showArrow]是否显示箭头booltrue
[showInput]是否显示输入框booltrue
[menuClassName]自定义浮层类名string-
[menuStyle]自定义浮层样式string-
[columnClassName]弹出菜单中数据列的自定义样式string-
[notFoundContent]当下拉列表为空时显示的内容string-
[data]初始化列数据,用于第一列的数据,子列通过选项的 children 加载,或者通过 load 事件异步加载。Array-
[enableCache]是否缓存异步加载的数据,若每次异步加载的数据都是变化的,需将该值设置为 falsebooltrue
[expandTrigger]次级菜单的展开方式,可选 ‘click’ 和 ‘hover’stringclick
[changeOnSelect]当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示boolfalse
[changeOn]可通过自定义的函数来判断点击菜单选项是否应该发生变化,当函数返回 true 时,将发生变化(option: NzCascaderOption, level: number) => boolean-
[triggerAction]触发菜单出现的行为(‘click’, ‘hover’)[][‘click’]
[valueProperty]value 的属性名称stringvalue
[labelProperty]label 的属性名称stringlabel
[visibleChange]异步加载事件(value: boolean) => void-
[change]选项值变更事件(values: any[]) => void-
[selectionChange]选项变更事件(values: NzCascaderOption[]) => void-
[clear]内容被清空事件() => void-