表单配置
本文将介绍如何设置表单配置中的UI相关配置，并详细说明各个配置项的作用。
设置表单配置
以下是设置表单配置的方法：
- 组件模式
在模板中设置表单配置：
html
<form-create :option="option"></form-create>- 全局方法
你还可以通过全局方法创建表单并设置表单配置：
js
window.formCreate.create(rule, option)构成
全局配置中额外支持一下配置项
- form：表单整体显示规则配置
- row：表单组件布局配置
- submitBtn：提交按钮样式配置
- resetBtn：重置按钮样式配置
- info：组件提示消息配置
- wrap: 配置
FormItem
配置表单(form)
类型：
Object说明：配置表单的整体显示规则，比如标签对齐方式和输入框对齐方式。
默认值:
js
{
inline: false,
labelPlacement: 'left',
labelWidth: '125px',
disabled: false,
size: undefined,
}- 完整配置项: Form props
配置示例
基础配置
标签顶部对齐
标签右对齐
行内表单
设置表单尺寸
配置布局(row)
类型：
Object说明：配置表单组件的布局，比如组件之间的间距。
默认值:
js
{
gutter: 0,
}- 完整配置项: Row props
配置示例
设置栅格间隔
配置提交按钮(submitBtn)
类型：
Object说明：配置提交按钮的样式和布局。
默认值:
js
{
type: 'primary',
loading: false,
disabled: false,
innerText: '提交',
show: true,
click: undefined,
}如果不需要显示提交按钮，可以将 submitBtn 设置为 false 或 submitBtn.show 设置为 false。
- 完整配置项: 布局规则 | Button_props
配置示例
基础配置
自定义按钮文字和样式
隐藏提交按钮
自定义提交事件
配置重置按钮(resetBtn)
类型：
Object说明：配置重置按钮的样式和布局。
默认值:
js
{
type: 'default',
loading: false,
disabled: false,
innerText: '重置',
show: false,
click: undefined,
}如果需要显示重置按钮，可以将 resetBtn 设置为 true 或 resetBtn.show 设置为 true。
- 完整配置项: 布局规则 | Button_props
配置示例
显示重置按钮
自定义重置按钮样式
自定义重置事件
悬浮提示框(info)
类型：
Object说明：组件提示消息配置
默认值:
js
{
type: 'popover',
placement: 'top-start',
icon: 'icon-info'
}可以在info配置项中设置提示组件的属性
- 提示组件: Popover_props | Tooltip_props
配置示例
使用 Popover 提示
使用 Tooltip 提示
自定义提示图标
禁用提示
配置 FormItem(wrap)
类型：
Object说明：配置
FormItem组件的显示规则，例如字段的样式和布局。完整配置项: FormItem_props