表单配置
本文将介绍如何设置表单配置中的UI相关配置，并详细说明各个配置项的作用。
设置表单配置
以下是设置表单配置的方法：
- 组件模式
在模板中设置表单配置：
html
<form-create :option="option"></form-create>- 全局方法
你还可以通过全局方法创建表单并设置表单配置：
js
window.formCreate.create(rule, option)构成
全局配置中额外支持一下配置项
- form：表单整体显示规则配置
- row：表单组件布局配置
- submitBtn：提交按钮样式配置
- resetBtn：重置按钮样式配置
- info：组件提示消息配置
- wrap: 配置
FormItem
配置表单(form)
类型：
Object说明：配置表单的整体显示规则，比如标签对齐方式和输入框对齐方式。
默认值:
js
{
layout: 'horizontal',
labelAlign: 'right',
labelCol: {
flex: '125px'
},
wrapperCol: {
span: 21
},
validateOnRuleChange: true
}- 完整配置项: Form_props
配置示例
基础配置
垂直布局
内联布局
标签左对齐
配置布局(row)
类型：
Object说明：配置表单组件的布局，比如组件之间的间距。
默认值:
js
{
gutter: 0
}- 完整配置项: Row_props
配置示例
设置栅格间隔
响应式间隔
使用 Flex 布局
配置提交按钮(submitBtn)
类型：
Object说明：配置提交按钮的样式和布局。
默认值:
js
{
disabled: false,
loading: false,
type: 'primary',
innerText: '',
show: true,
click: undefined
}提交按钮配置,设置submitBtn=false或submitBtn.show=false时不显示按钮
- 完整配置项: 布局规则；按钮上的其余属性与 Button 组件一致
配置示例
基础配置
自定义按钮文字和样式
隐藏提交按钮
自定义提交事件
设置按钮加载状态
配置重置按钮(resetBtn)
类型：
Object说明：配置重置按钮的样式和布局。
默认值:
js
{
disabled: false,
loading: false,
type: 'default',
innerText: '',
show: false,
click: undefined
}重置按钮默认配置,设置resetBtn=true或resetBtn.show=true时显示
- 完整配置项: 布局规则 | Button_props
配置示例
显示重置按钮
自定义重置按钮样式
自定义重置事件
悬浮提示框(info)
类型：
Object说明：组件提示消息配置
默认值:
js
{
type: 'popover',
placement: 'topLeft',
icon: 'QuestionCircleOutlined'
}可以在info配置项中设置提示组件的属性
- 提示组件: Popover、Tooltip 支持的属性
配置示例
使用 Popover 提示
使用 Tooltip 提示
自定义提示位置
自定义提示图标
禁用提示
配置 FormItem(wrap)
类型：
Object说明：配置
FormItem组件的显示规则，例如字段的样式和布局。默认值:
js
{}- 完整配置项: FormItem_props