FormCreate

# UI配置

本文将介绍如何设置表单配置中的UI相关配置，并详细说明各个配置项的作用。

表单全局配置

# 设置表单配置

以下是设置表单配置的方法：

  • 组件模式

在模板中设置表单配置：

<form-create-mobile :option="option"></form-create-mobile>
  • 全局方法

你还可以通过全局方法创建表单并设置表单配置：

window.formCreateMobile.create(rule, option)

# 构成

全局配置中额外支持一下配置项

  • form：表单整体显示规则配置
  • row：表单组件布局配置
  • submitBtn：提交按钮样式配置
  • resetBtn：重置按钮样式配置
  • wrap: 配置Field

# 配置表单(form)

  • 类型：Object

  • 说明：配置表单的整体显示规则，比如标签对齐方式和输入框对齐方式。

  • 默认值:

    {
    required: 'auto',
    labelAlign: 'right',
    inputAlign: 'right'
 }

  • 参考: Form props (opens new window)

# 配置布局(row)

  • 类型：Object

  • 说明：配置表单组件的布局，比如组件之间的间距。

  • 默认值:

    {
    gutter: 0,
}

  • 参考: Row props (opens new window)

# 配置提交按钮(submitBtn)

  • 类型：Object

  • 说明：配置提交按钮的样式和布局。

  • 默认值:

    {
    type: 'primary',
    loading: false,
    disabled: false,
    block: true,
    innerText: '提交',
    size: 'small',
    show: true,
}

    如果不需要显示提交按钮，可以将 submitBtn 设置为 false 或 submitBtn.show 设置为 false。

  • 参考: Button_props (opens new window)

# 配置重置按钮(resetBtn)

  • 类型：Object

  • 说明：配置重置按钮的样式和布局。

  • 默认值:

    {
    type: 'default',
    loading: false,
    disabled: false,
    block: true,
    innerText: '重置',
    size: 'small',
    show: false,
}

    如果需要显示重置按钮，可以将 resetBtn 设置为 true 或 resetBtn.show 设置为 true。

  • 参考: Button_props (opens new window)

# 配置 FormItem(wrap)

← col 布局规则 →