FormPro

Basic 基础使用

*
姓名
:
*
手机号
:
Rate 评分
:
before内容
零落梅花过残腊,故园归醉及新年。
after内容
Avatar 头像
:

form-pro 全部用法

*
姓名
:
*
手机号
:
textarea
:
InputNumber
:
Mention提及
:
显示子组件
:
测试使用componentProps -- Select a value
slot组件
:
插槽1[点击修改nickname值]{ "mention": "@" }

插槽3[点击修改checkboxGroup值]{ "mention": "@" }
slot组件2
:
插槽2
radio组件
:
radioGroup组件
:
radioButton组件
:
Checkbox组件
:
CheckboxGroup组件
:
CheckboxButton组件
:
Rate 评分
:
slider 滑块
:
Switch 开关
:
transfer 穿梭框
:

No data
TreeSelect 树型选择
:
Select
Avatar 头像
:

FormPro API

支持的组件

>>>支持的组件<<<

FormPro Attributes

tip:所有参数都可以通过 useForm 的回调函数 ==> setProps 赋值

NameDescriptionTypeDefault
schemas表单配置规则Array() => []
showFooter是否显示底部按钮Booleantrue
rowOptions表单行Row - 行布局object() => ({ gutter: 20 })
labelCol表单列Col - label布局object() => ({ span: 4 })
wrapperCol表单列Col - 表单内容布局object`() => ({ span: 18 })
actionColOptions表单底部布局object() => (

schemas 配置

NameDescriptionType其他介绍
field表单字段绑定值Array() => []
label表单字段名Booleantrue
components绑定的组件Object支持的组件
modelValue字段绑定值Object可以赋予默认值使用
ifShow字段是否显示Object`(formValues: any, formValues2: any, formValues3: any) => boolean
dynamicRules自定义校验Function(formValues: any) => Boolean
message快捷校验内容String——
componentProps根组件传参Object根组件传参所需的值可通过对象在此绑定
slotName插槽名称String当组件类型为插槽时,须配合slotName添加具名插槽名称
end底部插入Function可配合h函数使用 ( )=>{ h( [ div,{},

FormPro 事件

NameDescription回调函数
register使用 useForm 的回调Object
submit验证成功的确定回调Object
submit-error验证失败的确定回调Object
reset点击重置的回调Object

Source

ComponentDocs

Contributors