表单配置
本文将介绍如何设置表单配置中的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