DynamicField 动态表单

根据模型中某个字段的值，动态生成一组表单字段。

基础用法

当“类型”发生变化时，“动态字段”会根据 `returnFields` 返回的配置生成不同的输入框。

[
  {
    type: "select",
    name: "type",
    text: "类型",
    options: [
      {
        text: "类型A",
        value: "a"
      },
      {
        text: "类型B",
        value: "b"
      }
    ]
  },
  {
    type: "dynamic-field",
    text: "动态字段",
    dynamicKey: "type",
    returnFields: async (config, model, request) => {
        if (model.type === "a") {
          return [{ name: "fieldA", label: "字段A", defaultValue: "valueA" }];
        } else if (model.type === "b") {
          return [{ name: "fieldB", label: "字段B", defaultValue: "valueB" }];
        }
        return [];
      }
  }
]

显示配置

WARNING

特别注意：dynamic-field 的上一级配置必须设置 extensible: true，才能保存未在 schema 中声明的动态字段。

Attributes

参数	说明	类型	可选值	默认值
type	组件类型	string	dynamic-field	—
text	表单标签	string	—	—
dynamicKey	监听的字段名。当该字段值变化时，触发 returnFields 重新计算	string	—	—
returnFields	返回字段列表的函数	(config, model, request) => Promise<Field[]>	—	—

Field 对象结构

参数	说明	类型	默认值
name	字段名	string	—
label	标签名	string	—
defaultValue	默认值	any	—

配置类型

查看 DynamicFieldConfig 配置类型定义

export interface DynamicFieldConfig extends FormItem {
  type: 'dynamic-field' | 'dynamicField';
  returnFields: (
    config: DynamicFieldConfig,
    model: Record<any, any>,
    request: Object,
  ) => {
    name: string;
    label: string;
    defaultValue: string;
  }[];
  dynamicKey: string;
}

export interface FormItem {
  /** vnode的key值，默认是遍历数组时的index */
  __key?: string | number;
  /** 表单域标签的的宽度，例如 '50px'。支持 auto。 */
  labelWidth?: string | number;
  /** label 标签的title属性 */
  labelTitle?: string;
  className?: string;
  /** 字段名 */
  name?: string | number;
  /** 额外的提示信息，和 help 类似，当提示文案同时出现时，可以使用这个。 */
  extra?: string | FilterFunction<string>;
  /** 配置提示信息 */
  tooltip?: ToolTipConfigType | FilterFunction<ToolTipConfigType>;
  /** 是否置灰 */
  disabled?: boolean | FilterFunction;
  /** 使用表单中的值作为key，例如配置了text，则使用model.text作为key */
  key?: string;
  /** 是否显示 */
  display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
  /** 值发生改变时调用的方法 */
  onChange?: OnChangeHandler;
  /** label 标签的文本 */
  text?: string | FilterFunction<string>;
  /** 右侧感叹号 */
  tip?: string;

  filter?: 'number' | OnChangeHandler;
  /** 是否去除首尾空格 */
  trim?: boolean;
  /** 默认值 */
  defaultValue?: any | DefaultValueFunction;
  /** 表单验证规则 */
  rules?: Rule[];
  extensible?: boolean;
  dynamicKey?: string;
  /** 是否需要显示`展开更多配置` */
  expand?: boolean;
  style?: Record<string, any>;
  fieldStyle?: Record<string, any>;
  labelPosition?: 'top' | 'left' | 'right';
}