表单全局配置

在使用 FormCreate 生成表单时，可以通过全局配置来管理表单的行为和外观。本文将详细介绍如何设置全局配置，以及如何使用这些配置来增强表单的灵活性和可控性。

设置全局配置

组件模式

在组件模式下，通过 option 属性传递全局配置：

html

<form-create :option="option"></form-create>

全局方法

在使用全局方法创建表单时，也可以传递全局配置：

formCreate.create(rule, option)

示例演示

以下是一个简单的示例，展示了如何使用全局配置设置表单的行为：

配置项数据结构

以下是 ElementPlus 版本中 Option 配置项的数据结构示例：

type Option = {
    //设置组件默认配置
    global?: {
      '*':VNodeRule;
      [componentName:string]: VNodeRule;
    };
    //全局开启事件注入
    injectEvent?: Object|Boolean;
    //是否开启预览模式
    preview?: Boolean;
    //v-model是否更新未定义的字段值
    forceCoverValue?: Boolean;
    //v-model中是否保存不在规则中的字段
    appendValue?: Boolean;
    //表单提交时是否忽略表单中隐藏状态的字段
    ignoreHiddenFields?: Boolean;
    //设置表单的初始值（非双向绑定）
    formData?: Object;
    //配置表单多语言内容
    language: {
        //语言名称: {[ID]: 文字}
        [name: string] : {
            [id: string]: string;
        };
    },
    //用于指定表单挂载的 DOM 元素。在组件模式下无需设置。
    el?: Element;
    //表单提交时的回调函数。
    onSubmit?: (formData: Object, api: Api) => void;
    //在 fetch 请求前触发的回调，用于修改请求配置。
    beforeFetch?: (config: FetchEffectOption, form: {
      api: Api,
      rule: Rule
    }) => void;
    //表单创建成功后的回调函数。
    mounted?: (api: Api) => void;
    //表单重载后的回调函数。
    reload?: (api: Api) => void;
    //设置 Col 组件的整体配置。
    col?: Boolean | ColProps & {
        show?: Boolean;
    };
    //设置 Row 组件的整体配置。
    row?: Boolean | RowProps & {
        show?: Boolean;
    };
    //设置悬浮提示组件的配置。
    info?: Boolean | VNodeRule & {
        show?: Boolean;
        native?: Boolean;
        icon?: string;
        align?: 'left' | 'right';
        info?: string;
    };
    //设置 FormItem 组件的整体配置。
    wrap?: Boolean | (VNodeRule & FormItemProps & {show?: Boolean});
    //设置表单的整体配置，对应 UI 框架的表单组件。
    form?: FormProps;
    //设置提交按钮（Button 组件）的配置。
    submitBtn?: Boolean | ButtonProps & {
        click?: Function;
        innerText?: string;
        show?: Boolean;
    };
    //设置重置按钮（Button 组件）的配置。
    resetBtn?: Boolean | ButtonProps & {
        click?: Function;
        innerText?: string;
        show?: Boolean;
    };
    //设置 formItem 组件的 label 区域的配置。
    title?: Boolean | VNodeRule & {
        show?: Boolean;
        native?: Boolean;
        title: string;
    };


}

基础配置项详解

el

类型: Element
说明: 提供一个在页面上已存在的 DOM 元素作为表单的挂载目标,组件模式下无需设置

formData

类型: Object
说明: 设置表单的初始值 （非双向绑定）。

forceCoverValue

类型: bool
说明: 当启用时，在通过 v-model 同步表单数据时，未定义的字段将被设置为 undefined。默认为 false。

appendValue

类型: bool
说明: v-model中是否保存不在规则中的字段，默认为 true。

language

类型: Object
说明: 表单的多语言文字。

injectEvent

类型: Object | Boolean
说明: 全局开启事件注入功能。如果设置为 true，则所有组件都将启用事件注入功能，允许在组件配置中直接定义事件处理逻辑。

ignoreHiddenFields

类型: Boolean
说明: 表单提交时是否忽略表单中隐藏状态的字段。

onSubmit

表单提交回调函数

类型:

  type onSubmit = (formData:Object, api:Api) => Promise;

说明: 表单提交时的回调函数。
示例：

  {
    onSubmit: function(formData, fApi) {
        // 处理表单提交
    }
  }

通过标签设置

html

  <form-create @submit="onSubmit"></form-create>

reload

类型:

  type reload = (api:Api) => void;

说明: 表单重载后的回调函数。

mounted

类型:

  type mounted = (api:Api) => void;

说明: 表单创建成功后的回调函数。

beforeFetch

类型:

  type beforeFetch = (option:FetchEffectOption, form: {api:Api,rule:Rule}) => void;

说明: 在 fetch 请求前触发的回调，用于修改请求配置。
示例：

  {
    beforeFetch(config) {
      config.headers = {token:'xxx'};
    }
  }

global

组件全局配置

类型: Object

type global = {
    [componentName:string]: VNodeRule;
    //匹配所有组件
    '*':VNodeRule;
}

说明: 设置全局组件配置，可以统一设置所有组件或指定组件的配置。
示例：

统一设置所有组件：

{
  global:{
    '*':{
      col:{
        span:12
      },
      props:{
        disabled:false
      }
    }
  }
}

指定组件的全局配置：

类型：Object
说明：设置指定组件的全局配置,
示例：

  {
    global:{
      //设置 inputNumber 组件
      inputNumber: {
        props:{
          disabled: true,
          precision: 2
        }
      }
    }
  }

这里的组件名称必须和生成规则里面 type 相同

UI框架配置

FormCreate 支持多个 UI 框架，每个框架的配置项略有不同。以下是各个框架的全局配置指南：

form

类型: Object
说明: 设置表单的整体配置，对应 UI 框架的表单组件。

wrap

类型: Object
说明: 设置 FormItem 组件的整体配置。

row

类型: Row&{show?:bool}|bool
说明: 设置 Row 组件的整体配置。

col

类型: Col&{show?:bool}|bool
说明: 设置 Col 组件的整体配置。

submitBtn

类型:

type submitBtn = (Button&{show?:bool,click?:Function,innerText?:string})|bool

说明: 设置提交按钮（Button 组件）的配置。

resetBtn

类型:

type resetBtn = (Button&{show?:bool,click?:Function,innerText?:string})|bool

说明: 设置重置按钮（Button 组件）的配置。

info

类型:

type info = ((TooltipProps|PopoverProps)& {
  show?: Boolean;
  native?: Boolean;
  icon?: string;
  align?: 'left' | 'right';
  info?: string;
})|bool

说明: 设置悬浮提示组件的配置。

title

类型:

type title = (VNodeRule & {
  show?: Boolean;
  native?: Boolean;
  title?: string;
})|bool

说明: 设置 formItem 组件的 label 区域的配置。

通过了解并灵活应用这些全局配置，您可以极大提升表单的可维护性和可扩展性，为项目开发带来更大的便利。

表单全局配置 ​

设置全局配置 ​

示例演示 ​

配置项数据结构 ​

基础配置项详解 ​

el ​

formData ​

forceCoverValue ​

appendValue ​

language ​

injectEvent ​

ignoreHiddenFields ​

onSubmit ​

reload ​

mounted ​

beforeFetch ​

global ​

UI框架配置 ​

form ​

wrap ​

row ​

col ​

submitBtn ​

resetBtn ​

info ​

title ​