Cascader

Usually, it's used in province/city/district, company hierarchy, category of things, etc.

Note

  • Value of default or formData should always be an array, for example, city cascade may only save leaf node value, but you need to manually provide the whole data chain value array

Data Source

Static

One time fetching data, data source is from asyncData, enum.

Realtime

Every select triggers a HTTP request, data source is from asyncData; includes three parameters (node: NzCascaderOption, index: number, me: CascaderWidget) => PromiseLike<any>, me indicates instance of the current widget.

Examples

Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';
import { SFCascaderWidgetSchema, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-cascader-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
})
export class FormCascaderSimpleComponent {
  schema: SFSchema = {
    properties: {
      static: {
        type: 'number',
        title: 'Static',
        enum: [
          {
            value: 110000,
            label: '北京',
            parent: 0,
            children: [
              {
                value: 110100,
                label: '北京市',
                parent: 110000,
                children: [
                  {
                    value: 110101,
                    label: '东城区',
                    parent: 110100,
                    isLeaf: true,
                  },
                  {
                    value: 110105,
                    label: '朝阳区',
                    parent: 110100,
                    isLeaf: true,
                  },
                ],
              },
            ],
          },
        ],
        ui: 'cascader',
        default: [110000, 110100, 110105],
      },
      async: {
        type: 'number',
        title: 'RealTime',
        ui: {
          widget: 'cascader',
          asyncData: (node, index) => {
            return new Promise(resolve => {
              setTimeout(() => {
                (node as any).children = [
                  { value: 110000, label: '北京', parent: 0 },
                  { value: 110100, label: '北京市', parent: 110000 },
                  { value: 110101, label: '东城区', parent: 110100 },
                  { value: 110105, label: '朝阳区', parent: 110100 },
                  { value: 310000, label: '上海', parent: 0 },
                  { value: 310100, label: '上海市', parent: 310000 },
                  { value: 310101, label: '黄浦区', parent: 310100 },
                  { value: 310104, label: '徐汇区', parent: 310100 },
                ].filter((w: any) => {
                  w.isLeaf = index === 1;
                  return w.parent === (node.value || 0);
                });
                resolve();
              }, 300);
            });
          },
        } as SFCascaderWidgetSchema,
        default: [110000, 110100, 110105],
      },
    },
  };

  constructor(private msg: NzMessageService) {}

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema

PropertyDescriptionTypeDefault
[enum]Static data sourceSFSchemaEnumType[]-
[readOnly]Read onlyboolean-

ui

PropertyDescriptionTypeDefault
[asyncData]Asynchronous static data source(node: NzCascaderOption, index: number, me: CascaderWidget) => PromiseLike<any>-
[size]Size, equals to nzSizestring-
[placeholder]Placeholderstring-
[showSearch]Whether support searchboolfalse
[allowClear]Whether show clear buttonbooltrue
[clearText]Title of clear buttonstring清除
[showArrow]Whether show arrowbooltrue
[showInput]Whether show inputbooltrue
[menuClassName]Custom floating layer class namestring-
[menuStyle]Custom floating layer stylestring-
[columnClassName]Custom style of data column in popup menustring-
[notFoundContent]Content when dropdown list is emptystring-
[data]Initial data, is used in first column data, sub column is loaded by children option, or loaded by load asynchronous eventArray-
[enableCache]Whether cache asynchronous loaded data, should set it to false if data is changed in every asynchronous loadbooltrue
[expandTrigger]How is sub menu expanded, options: 'click' or 'hover'stringclick
[changeOnSelect]When it is set to true, the value is changed when each level of menu option is selected, see details from above demoboolfalse
[changeOn]Custom function to determine if it should have a change when a menu option is selected, will have a change when return value is true(option: NzCascaderOption, level: number) => boolean-
[triggerAction]Trigger action to show menu('click', 'hover')[]['click']
[valueProperty]Property of valuestringvalue
[labelProperty]Property of labelstringlabel
[visibleChange]Asynchronous load event(value: boolean) => void-
[change]Selected value changed event(values: any[]) => void-
[selectionChange]Select option changed event(values: NzCascaderOption[]) => void-
[clear]Content clear event() => void-