Skip to content

表单配置

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

表单全局配置

设置表单配置

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

  • 组件模式

在模板中设置表单配置:

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

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

js
window.formCreateMobile.create(rule, option)

构成

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

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

配置表单(form)

  • 类型Object

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

  • 默认值:

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

配置布局(row)

  • 类型Object

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

  • 默认值:

js
  {
      gutter: 0,
  }

配置提交按钮(submitBtn)

  • 类型Object

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

  • 默认值:

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

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

配置重置按钮(resetBtn)

  • 类型Object

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

  • 默认值:

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

如果需要显示重置按钮,可以将 resetBtn 设置为 trueresetBtn.show 设置为 true

配置 FormItem(wrap)

  • 类型Object

  • 说明:配置 Field 组件的显示规则,例如字段的样式和布局。

  • 参考: Field_props

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用