Appearance
VModelForm
VModelForm 组件参数说明
| 插槽 | 说明 | 类型 |
|---|---|---|
| options | (必填)表单配置项，定义表单字段的结构和属性 | Record<string, typeof ElFormItem> |
| formData | (必填)表单数据对象，用于双向绑定表单值 | Record< string, any> |
| formRef | (必填)表单实例引用，用于表单验证和操作 | Ref< FormInstance> |
| title | (选填)弹窗标题 | string |
| width | (选填)弹窗宽度，默认为 1200px | string |
| initialData | (选填)初始数据，用于编辑模式时填充表单 | Record< string, any> |
| disabled | (选填)是否禁用表单 | boolean |
插槽
| 插槽 | 说明 | 必填/选填 |
|---|---|---|
| default | 触发弹窗的内容区域，点击后会打开表单弹窗 | 选填 |
事件·
| 事件名 | 说明 | 参数 |
|---|---|---|
| search | 搜索事件 | - |
| reset | 重置事件 | - |
| confirm | 确认事件 | - |
| cancel | 取消事件 | - |
| success | 表单验证成功事件 | (title: string, formData: Record<string, any>) |
特色功能
- 弹窗表单 : 基于 v-dialog 组件实现的弹窗式表单
- 表单验证 : 集成 Element Plus 表单验证功能
- 编辑模式 : 支持通过 initialData 进行表单数据回填
- 自动重置 : 支持表单数据的自动重置和清空
- 响应式 : 支持表单字段的动态配置
- Teleport : 使用 Teleport 将弹窗渲染到 body 下
使用说明
- options 参数必须提供，用于定义表单结构
- formData 和 formRef 是必需的，用于表单数据绑定和验证
- 点击默认插槽内容会触发弹窗打开
- 在编辑模式下，传入 initialData 会自动填充表单
- 表单提交成功后会触发 success 事件，父组件需要处理实际的 API 调用