Skip to content

ProForm

高级表单用于快速构建表单视图

基础用法

请输入姓名
Please Input
{}
Default
expand codecollapse code

表单校验

Please Input
Please Input
{}
Default
expand codecollapse code

栅格表单

Please Input
Please Input
Please Select
{}
Default
expand codecollapse code

Props

参数类型可选值默认值说明
v-modelobject | array--绑定值
columnsarray--表单配置参考下面 columns
toolbarProFormNormalToolBar | ProFormStepsToolBar--表单工具栏配置参考下面 toolbar,默认值按表单类型自动设置
typestringnormal | stepsnormal表单类型
rulesobject--表单验证规则
gridboolean-true栅格布局
colsnumber-24显示的栅格数量
xGapnumber-12横向间隔槽
yGapnumber-0纵向间隔槽

更多参数请参考 n-formn-grid 的属性。

事件

事件名参数说明
submit(isValid: boolean) => void提交表单时触发
reset() => void重置表单时触发

方法

方法名参数说明
validate(callback?: FormValidateCallback, shouldRuleBeApplied?: ShouldRuleBeApplied) => void还原到未校验的状态
restoreValidation() => void验证表单,Promise rejection 的返回值的是类型 Array<FormValidationError>
resetFields() => void对整个表单进行重置,将所有字段值重置为初始值并移除校验结果

Columns

参数类型默认值说明
labelstring-标签文本
propstring-v-model 绑定的字段名 (需要是唯一值)
componentstring | VNode-组件配置参考下面 Component Field Types
propsobject-传递的对应的组件的参数
spannumber24栅格占据的列数,为 0 的时候会隐藏
showbooleantrue默认显示状态,设置 false 时会隐藏
descriptionstring-表单类型为 steps 时有效,步骤描述
childrenProFormColumn[]-表单类型为 steps 时有效

Toolbar

defineProFormNormalToolBar

  • 普通表单使用
参数类型可选值默认值说明
justifystring'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'start布局对齐方式
submitboolean-true提交按钮
submitTextstring--默认 i18n 文本
submitPropsButtonProps-提交按钮 传入的props
resetboolean-true重设按钮
resetTextstring--默认 i18n 文本
resetPropsButtonProps--重设按钮 传入的props

defineProFormStepsToolBar

defineProFormStepsToolBar 继承于 defineProFormNormalToolBar 的所有参数

  • 步骤表单使用
参数类型默认值说明
prevbooleantrue上一步按钮
prevPropsButtonProps-上一步按钮 传入的props
nextbooleantrue下一步按钮
nextPropsButtonProps-下一步按钮 传入的props