cascader 级联选择

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

注意事项

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

数据源说明

静态

指一次性获取数据，数据来源于 asyncData、enum。

实时

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

代码演示

基础样例

最简单的用法。

import { Component } from '@angular/core';
import { SFSchema, SFCascaderWidgetSchema } 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(public msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema 属性

ui 属性