DialogForm 弹窗表单
基于 Element Plus 的 Dialog 和 Form 组件封装，提供了便捷的弹窗表单配置和操作。支持表单验证、自定义渲染等功能。
基础用法
基础的弹窗表单配置展示。
表单内容编辑
自定义表单验证
自定义按钮
分步表单
动态表单
API
DialogForm 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isShow | 是否显示弹窗 | boolean | false |
| buttons | 按钮列表 | array | - |
| dialog-props | 弹窗的属性配置，具体见element-plus dialog文档 | object | { closeOnClickModal: false, appendToBody: true, destroyOnClose: true, width: "750px", alignCenter: true } |
| input-form-props | 表单属性配置，具体见input-form文档 | object | { } |
DialogButton 配置
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| handle-code | 按钮操作CODE作为唯一标识 | string | - |
| contents | 按钮文本 | string | - |
| slot | 自定义插槽名称（如有值其他选项无效） | string | - |
| custom-icon | 自定义图标 | string / Component | - |
| is-show | 是否显示 | boolean | true | | click | 按钮点击函数事件，返回false或者异常不会自动关闭弹窗 | Function | - | | ... | 其他属性配置选项，具体见（element-plus button文档） | - | - |
DialogForm 事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| field-value-change | 表单数值的变化时间 | Function |
| close | 弹窗关闭时触发 | Function |
DialogForm 方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| getInputValue | 获取表单的value | Function |
| setInputPropertyValue | 设置表单的属性值 | Function |
| changeFormFields | 修改当前form字段的属性 | Function |
| changeButtons | 修改当前生成的button按钮属性 | Function |
| validate | 表单验证 | Function |
| getFormRef | 获取表单实例 | Function |
DialogForm 插槽
| 插槽名 | 说明 | 作用域 |
|---|---|---|
| default | 默认弹窗body的顶部内容 | - |
| [inputFormProps.field.slot] | 自定义表单项内容 | object |
| [button.slot] | 自定义按钮内容 | object |
注意事项
- 表单字段的 name 属性必须唯一
- 验证规则需要符合 Element Plus Form 的规则格式
- 自定义表单项需要自行处理数据绑定
- 建议使用 async/await 处理表单验证
- 可以通过自定义底部内容实现更多操作