级联选择

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

注意事项

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

数据源说明

静态

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

实时

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

代码演示

基础样例

最简单的用法。

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 属性

成员说明类型默认值
[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-