useFormDialog 表单对话框
在 useDialog 之上注入 ElFormBuilder：内容区默认渲染构建器，底部「提交」先执行 el-form validate()，再可选 submitHandler，最后 resolve 并携带当前 model 的 JSON 快照；「取消」触发 cancelHandler 后以 cancel 原因 reject。
与 useDialog 相同，须在应用根布局挂载 portal-vue 目标（文档站已在布局中放置 <portal-target name="ell-dialog" multiple />）。
基础用法
参数
useFormDialog(options, keepInstance?, targetName?)
| 参数 | 说明 | 默认 |
|---|---|---|
options | 见 UseFormDialogOptions | — |
keepInstance | 是否保留 ElDialog 实例（同 useDialog） | false |
targetName | portal 目标名 | 'ell-dialog' |
返回值
在 useDialog 的 dialogUid、各 *PortalName、openDialog 等基础上扩展：
| 属性 | 说明 |
|---|---|
formUid | 内部为 ElFormBuilder 生成的 uid |
open / openFormDialog | 打开表单弹窗，入参 EllFormDialogOpenArgs? |
close | 手动 resolve；不传参时 data.model 为当前快照 |
dismiss | reject({ reason: 'cancel' }) |
类型说明
主包导出：
ts
import type {
EllFormDialogFormConfig,
EllFormDialogOpenArgs,
EllFormDialogPayload,
UseFormDialogOptions,
} from 'element-plus-lab'EllFormDialogPayload：model（响应式）、formRef（el-form实例，打开初期可能为undefined）、uid（与内部ElFormBuilder相同，用于拼接${uid}-${field}-body-append等 portal 名）。UseFormDialogOptions：除formConfig外，可选title/width/dialogConfig/submitText/cancelText/actions，以及renderHeader/render/renderFormSlot/renderFooter/beforeClose（render*语义同useDialog）。
renderFormSlot：在默认 ElFormBuilder 的默认插槽里写入 VNode（与 model / uid 同一份）。典型用法是 Portal 打到分组 / 自定义块的 ${uid}-${field}-body-append 等靶位，无需 render 整段替换主体。与 render 同时存在时以 render 为准。
ts
import { Portal } from 'portal-vue'
const { open } = useFormDialog({
formConfig: {
schema: [
{
type: 'group',
field: 'space',
children: [
{ field: 'name', label: '名称', controlType: 'input' },
],
},
],
initialValues: { name: '' },
},
renderFormSlot: ({ uid, model }) => (
<Portal to={`${uid}-space-body-append`}>
{/* 与 schema 字段同一份 model，可读写 */}
<span>{String(model.name ?? '')}</span>
</Portal>
),
})详见 packages/components/form-dialog/src/types.ts。
贡献者
jenemy
Cursor