config

详情： 表单配置

默认值： []

类型： FormConfig

查看 FormConfig 及关联类型定义

export type FormConfig<T = never> = FormItemConfig<T>[];

export type FormItemConfig<T = never> = ChildConfig<T> | DynamicTypeConfig | EditorChildConfig<T> | T;

export type ChildConfig<T = never> =
  | ContainerCommonConfig<T>
  | TabConfig<T>
  | RowConfig<T>
  | FieldsetConfig<T>
  | PanelConfig<T>
  | TableConfig
  | GroupListConfig<T>
  | StepConfig<T>
  | DisplayConfig
  | TextConfig
  | NumberConfig
  | NumberRangeConfig
  | HiddenConfig
  | LinkConfig<T>
  | DaterangeConfig
  | TimerangeConfig
  | SelectConfig
  | CascaderConfig
  | HtmlField
  | DateConfig
  | ColorPickConfig
  | TimeConfig
  | DateTimeConfig
  | CheckboxConfig
  | SwitchConfig
  | RadioGroupConfig
  | CheckboxGroupConfig
  | TextareaConfig
  | DynamicFieldConfig
  | ComponentConfig
  | FlexLayoutConfig<T>;

export interface DynamicTypeConfig extends FormItem {
  type: TypeFunction;
  [key: string]: any;
}

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';
}

示例：

html

<template>
  <m-form-dialog :config="config"></m-form-dialog>
</template>

<script setup>
  import { ref } from "Vue";

  const config = ref([
    {
      name: "text",
      text: "文本",
    },
    {
      name: "multiple",
      text: "多行文本",
      type: "switch",
    },
  ]);
</script>

<template> <m-form-dialog :init-values="initValues"></m-form-dialog> </template> <script setup> import { ref } from 'Vue'; const initValues = ref([ text: 'text', multiply: true, ]); </script>

showDiff

详情：

自定义“是否展示对比内容”的判断函数（仅在 isCompare === true 时生效）。

不传：使用默认逻辑 !isEqual(curValue, lastValue)（基于 lodash isEqual）；
传函数：完全以函数返回值为准，返回 true 才展示前后两份对比内容。

该 prop 通过 formState 透传到所有层级的 Container 中，调用方只需在 MForm 这一层传一次即可对整棵表单生效。

典型场景：某些字段语义上相等但结构不同（例如 code-select 字段中 '' 与 { hookType: 'code', hookData: [] } 应视为相等），调用方在此处显式声明，避免被 isEqual 误判为差异。

类型： (data: { curValue: any; lastValue: any; config: FormItemConfig }) => boolean

示例：

html

<template>
  <m-form :config="config" :is-compare="true" :last-values="lastValues" :show-diff="showDiff"></m-form>
</template>

<script setup>
  import { isEqual } from 'lodash-es';

  const showDiff = ({ curValue, lastValue, config }) => {
    if (config?.type === 'code-select') {
      // 业务侧自定义：双方都是“空形态”视为相等，不展示对比
      const isEmpty = (v) =>
        v === '' || v === undefined || v === null ||
        (typeof v === 'object' && v.hookType === 'code' && Array.isArray(v.hookData) && v.hookData.length === 0);
      if (isEmpty(curValue) && isEmpty(lastValue)) return false;
    }
    return !isEqual(curValue, lastValue);
  };
</script>

useFieldTextInError

详情：

表单校验失败时，错误提示前缀是否使用字段的 text 文案（通过 getTextByName 从 config 中查找）。

true（默认）：错误提示形如 字段文案 -> 错误信息，找不到 text 时回退为字段 name；
false：跳过查找，直接使用字段 name 作为错误提示前缀（形如 字段name -> 错误信息）。

默认值： true

类型： boolean

Form组件属性 props

config

initValues

lastValues

isCompare

showDiff

parentValues

labelWidth

disabled

height

stepActive

size

inline

labelPosition

keyProp

popperClass

preventSubmitDefault

useFieldTextInError

extendState

Form组件属性 props ​

config ​

initValues ​

lastValues ​

isCompare ​

showDiff ​

parentValues ​

labelWidth ​

disabled ​

height ​

stepActive ​

size ​

inline ​

labelPosition ​

keyProp ​

popperClass ​

preventSubmitDefault ​

useFieldTextInError ​

extendState ​

Form组件属性 props

config

initValues

lastValues

isCompare

showDiff

parentValues

labelWidth

disabled

height

stepActive

size

inline

labelPosition

keyProp

popperClass

preventSubmitDefault

useFieldTextInError

extendState