表单配置
本文将介绍如何设置表单配置中的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'
}- 完整配置项: Form props
配置示例
基础配置
标签左对齐
标签居中
设置必填标记显示方式
配置布局(row)
类型：
Object说明：配置表单组件的布局，比如组件之间的间距。
默认值:
js
{
gutter: 0,
}- 完整配置项: Row props
配置示例
设置栅格间隔
配置提交按钮(submitBtn)
类型：
Object说明：配置提交按钮的样式和布局。
默认值:
js
{
type: 'primary',
loading: false,
disabled: false,
block: true,
innerText: '提交',
size: 'small',
show: true,
}如果不需要显示提交按钮，可以将 submitBtn 设置为 false 或 submitBtn.show 设置为 false。
- 完整配置项: Button_props
配置示例
基础配置
自定义按钮文字和样式
隐藏提交按钮
自定义提交事件
配置重置按钮(resetBtn)
类型：
Object说明：配置重置按钮的样式和布局。
默认值:
js
{
type: 'default',
loading: false,
disabled: false,
block: true,
innerText: '重置',
size: 'small',
show: false,
}如果需要显示重置按钮，可以将 resetBtn 设置为 true 或 resetBtn.show 设置为 true。
- 完整配置项: Button_props
配置示例
显示重置按钮
自定义重置按钮样式
自定义重置事件
配置 FormItem(wrap)
类型：
Object说明：配置
Field组件的显示规则，例如字段的样式和布局。完整配置项: Field_props