# DialogForm - 弹框表单

DialogForm 是 ProForm 的一个变体,本质上仍然是个表单。DialogForm 的表现与 ProForm 相同,可以从 ProForm 直接修改而来。

# 在线示例
# 基础用法
# 网格布局
# API

DialogForm 在 el-dialog 和 el-form 上进行了一层封装,支持了一些预设。

# DialogForm Attributes

ProForm Attributes 基础上,新增了以下 API。

参数 说明 类型 默认值
v-model 是否打开弹框 boolean -
title 弹框的标题 string -
renderTitle 自定义弹框标题 (form) => jsx -
width 弹框的宽度 string -
dialogProps el-dialog attributes 的配置。注意:不支持 visible,请使用 v-model DialogProps -
dialogEvents el-dialog events 的配置 DialogEvents -

# DialogForm Events

ProForm Events

# DialogForm Methods

ProForm Methods 基础上新增了以下方法

参数 说明 类型 默认值
close 关闭弹框 () => void -

# formItemsConfig

ProForm formItemsConfig

# submitterProps

submitter 设置 false 会隐藏默认的提交按钮。

参数 说明 类型 默认值
cancelText 取消按钮的文本 string 取消
submitText 确定按钮的文本 string 确定
cancelButtonProps el-button 的 attributes & button 的原生属性 ButtonProps -
submitButtonProps el-button 的 attributes & button 的原生属性 ButtonProps -
customRender 自定义渲染 false | (form , action, doms) => jsx[] -

不支持通过 footer 来自定义页脚,如果要定义页脚需要使用 submitter.customRender。

customRender 的第一个参数是表单数据;第二个参数是事件对象;第三个参数是默认的 doms 数组,第一个是取消按钮,第二个是确定按钮。