文档
- 开始使用
- Schema
- 校验错误
- 自定义小部件
- 如何布局
- 常见问题
Examples
- 在线校验器
- acl ACL
- visibleIf 条件表达式
- i18n 国际化
- method 内置方法
- modal 模态框
小部件
- object 对象
- array 数组
- string 文本框
- boolean 开关
- number 数字
- select 选择器
- checkbox 多选框
- custom 自定义
- date 日期
- radio 单选框
- text 文本
- textarea 多行文本框
非内置小部件
- autocomplete 自动完成
- cascader 级联选择
- color 颜色
- mention 提及
- qr-code 二维码
- rate 评分
- segmented 分段控制器
- slider 滑动输入条
- tag 标签
- time 时间
- transfer 穿梭框
- tree-select 树选择
- upload 上传
第三方小部件
- monaco-editor Monaco Editor
- tinymce Tinymce富文本

级联选择

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

如何使用

非内置模块，需要额外在 json-schema 注册 withCascaderWidget。

注意事项

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

数据源说明

静态

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

实时

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

代码演示

基础样例

最简单的用法。

import { Component, inject } from '@angular/core';

import { DelonFormModule, SFSchema } from '@delon/form';
import type { SFCascaderWidgetSchema } from '@delon/form/widgets/cascader';
import type { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-cascader-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)" /> `,
  standalone: true,
  imports: [DelonFormModule]
})
export class FormCascaderSimpleComponent {
  private readonly msg = inject(NzMessageService);
  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 NzSafeAny).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: NzSafeAny) => {
                  w.isLeaf = index === 1;
                  return w.parent === (node.value || 0);
                });
                resolve();
              }, 300);
            });
          }
        } as SFCascaderWidgetSchema,
        default: [110000, 110100, 110105]
      }
    }
  };

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