# 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
# DialogForm Methods
在 ProForm Methods 基础上新增了以下方法
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| close | 关闭弹框 | () => void | - |
# 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 数组,第一个是取消按钮,第二个是确定按钮。