DialogForm 表单

DialogForm 组件是 PlusDialog和 PlusForm 组件的组合，是在 PlusDialog 组件上自定义 footer 的基础上构建而来，除下文提到 PlusDialogForm 特有的属性和方法外，同时支持 PlusForm 组件的所有自定义函数和插槽。

注意

表单v-model绑定的值尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题。 参考 reactive 的局限性

基础用法

自定义表单项

支持 PlusForm 自定义表单项 自定义表单项 的三种(renderField/slot/jsx)方式。

自定义表单 label

支持 PlusForm 自定义表单 label 自定义表单项 的三种(renderLabel/slot/jsx)方式。

自定义底部

DialogForm 组件由 PlusDialog和 PlusForm 组成，它同时支持两个组件的底部插槽，DialogForm默认使用的PlusDialog的底部按钮，所以PlusForm组件的 hasFooter属性默认给了 false。要定义PlusForm组件的底部，需要PlusDialog组件的 hasFooter属性给 false，PlusForm组件的 hasFooter属性给true。

DialogForm API

DialogForm Attributes

名称	说明	类型	默认值	是否必须
model-value / v-model	表单绑定值 （尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题）	objectFieldValues		否
visible / v-model:visible	弹窗显示	boolean	false	否
form	PlusForm 的 props	objectPlusFormProps	{hasFooter:false,footerAlign:'right'}	否
dialog	PlusDialog 的 props	objectPlusDialogProps	{width:"800px",top:"10vh", title:"弹窗表单"}	否
hasErrorTipv0.0.10	是否需要校验 message 提示	boolean	true	否

DialogForm Events

名称	说明	类型
confirm	点击确定按钮触发的事件	function
change	表单变化触发的事件	function
cancel	点击取消按钮触发的事件	function
close v0.1.25	el-dialog 的close事件	function
submitErrorv0.0.10	点击提交按钮校验不通过触发的事件	function

DialogForm Slots

插槽名	说明	作用域插槽参数
dialog-header	PlusDialog 的 header slot
dialog-footer	PlusDialog 的 header slot	{handleConfirm,handleCancel} 弹窗表单默认的确定,取消方法
form-footer	PlusForm 的 footer slot， 配置属性 :form="{hasFooter:true}" 生效	{handleSubmit,handleReset} 表单默认的提交，重置方法
tooltip-iconv0.0.3	PlusForm 的 tooltip icon
form-group-header	PlusForm 的 group-header slot	{title,columns,icon}
plus-field-*	PlusForm 的自定义表单项，组件会自动根据配置项的 prop 生成对应的插槽	{prop,label,fieldProps,valueType,column}
plus-label-*	PlusForm 的自定义表单项 label，组件会自动根据配置项的 prop 生成对应的插槽	{prop,label,fieldProps,valueType,column}
plus-extra-*	PlusForm的自定义渲染 el-form-item 下一行额外的内容，组件会自动根据配置项的 prop 生成对应的插槽	{column}
plus-previous-* v0.1.25	自定义渲染el-form-item 上一行额外的内容，组件会自动根据配置项的 prop 生成对应的插槽	{column}

Exposes

名称	说明	类型
formInstance	el-form 实例	object