表单组件参数
Props
通过组件设置
html
<form-create :rule="rule" :option="option"></form-create>
<form-create :rule="rule" :option="option"></form-create>
rule
- 类型:
Array
- 说明: 表单生成规则 详细说明
option
- 类型:
Object
- 说明: 配置表单 详细说明
modelValue(v-model)
- 类型:
Object
- 说明: 设置双向绑定的表单值
api(v-model:api)
- 类型:
Api
- 说明: 获取
fApi
详细说明
name
- 类型:
string
- 说明: 为表单设置名称,可以通过
getApi
方法拿到fApi
subForm
- 类型:
bool
- 说明: 是否是子表单,为
true
时与父表单同步进行验证等操作,默认为true
extendOption
- 类型:
bool
- 说明: form-create组件嵌套时,是否自动继承父表单配置,默认为
true
inFor
- 类型:
bool
- 说明: 是否在循环中
Events
监听方式:
通过组件监听
html
<form-create @change="onChange"></form-create>
<form-create @change="onChange"></form-create>
通过 fApi
监听
js
fApi.on('change',this.onChange);
fApi.on('change',this.onChange);
change
- 类型:
ts
type change = (field:string, value:any,rule:Rule, api:Api, setFlag: boolean)=>void;
type change = (field:string, value:any,rule:Rule, api:Api, setFlag: boolean)=>void;
- 说明: 当表单组件的值在组件内部发生变化时触发,
setFlag
为true
时是主动修改
remove-field
- 类型:
ts
type removeField = (field:string, rule:Rule, api:Api)=>void;
type removeField = (field:string, rule:Rule, api:Api)=>void;
- 说明:移除表单组件规则后触发
remove-rule
- 类型:
ts
type removeRule = (rule:Rule, api:Api)=>void;
type removeRule = (rule:Rule, api:Api)=>void;
- 说明:移除生成规划后触发
repeat-field
- 类型:
ts
type repeatField = (rule:Rule, api:Api)=>void;
type repeatField = (rule:Rule, api:Api)=>void;
- 说明:规则
field
重复
emit-event
- 类型:
ts
type emitEvent = (emitName:string, ...args:any[])=>void;
type emitEvent = (emitName:string, ...args:any[])=>void;
- 说明: 在组件的
emit
事件触发时触发
control
- 类型:
ts
type control = (rule:Rule, api:Api)=>void;
type control = (rule:Rule, api:Api)=>void;
- 说明: 在组件的
control
生效或失效时触发
mounted
- 类型:
ts
type mounted = (api:Api)=>void;
type mounted = (api:Api)=>void;
- 说明: 在表单首次渲染完成后触发
reload
- 类型:
ts
type reload = (api:Api)=>void;
type reload = (api:Api)=>void;
- 说明: 在表单重载后触发
submit
- 类型:
ts
type submit = (formData:Object, api:Api)=>void;
type submit = (formData:Object, api:Api)=>void;
- 说明: 点击表单提交按钮时触发