useForm
基于 ElFormBuilder 的组合式封装:在钩子内持有 model、schema(可选 Ref)与 uid,模板中渲染返回的 Form 即可,无需手写 v-model / :schema。
与直接使用 ElFormBuilder 一致,支持 actions、portal 锚点、submitHandler / saveHandler / resetHandler 等全部构建器能力;另有便捷方法对接 el-form 与 defineExpose(如 validate、getControlRef、setSchema)。
基础用法
与历史方案的关系
早期草案中的 Form 单字母组件、transform 提交流转、errors 聚合、updateSchema 细粒度补丁 等未纳入当前 EllFormSchema / ElFormBuilder 实现范围。以本文与 packages/components/hooks/use-form 源码为准;schema 请用 setSchema 或持 Ref 自行替换。
API
useForm(options): UseFormReturn
options:在 ElFormBuilderProps 基础上去掉 modelValue,schema 为 EllFormSchema[] | Ref<EllFormSchema[]>;其余字段(initialValues、grid、actions 等)与原构建器相同。
| 成员 | 说明 |
|---|---|
Form | 已绑定 model / schema / uid 的 ElFormBuilder 包装组件;支持默认插槽(与 ElFormBuilder 一致,透出 uid、formRef、model 等) |
uid | 本次实例 uid(选项或内部 ulid) |
model | 表数据 ref |
schema | schema 的 ref(传入数组时由内部 ref 包装) |
builderRef | ElFormBuilder 组件实例(挂载后非空) |
formRef | ComputedRef,指向 el-form(挂载后) |
validate / validateField / clearValidate / scrollToField | 委托 FormInstance |
resetFields | resetFields + 合并 initialValues(与构建器内置重置一致) |
getFieldValue / setFieldValue / getFieldsValue / setFieldsValue | 读写 model |
submit | validate → submitHandler(model, formRef)(未挂载则 reject) |
save | saveHandler(model, formRef)(不校验) |
setSchema | 全量替换 schema |
getControlRef / getFormItemRef / formItemRef | 与 ElFormBuilder expose 对齐 |
类型说明
主包导出:
ts
import type {
EllFormSchema,
EllUseFormBuilderRef,
UseFormOptions,
UseFormReturn,
} from 'element-plus-lab'UseFormOptions/UseFormReturn:入参与返回值;EllFormSchema与ElFormBuilder一致。EllUseFormBuilderRef:builderRef挂载后实例的形状(与defineExpose子集对齐)。
详见 packages/components/hooks/use-form/src/types.ts。
显示类型声明
ts
export type UseFormOptions = Omit<ElFormBuilderProps, 'modelValue'> & {
schema: EllFormSchema[] | Ref<EllFormSchema[]>
}
export interface UseFormReturn {
Form: DefineComponent
uid: string
model: Ref<Record<string, unknown>>
schema: Ref<EllFormSchema[]>
builderRef: ShallowRef<EllUseFormBuilderRef | null>
formRef: ComputedRef<FormInstance | undefined>
validate: FormInstance['validate']
validateField: FormInstance['validateField']
clearValidate: FormInstance['clearValidate']
resetFields: () => void
scrollToField: FormInstance['scrollToField']
getFieldValue: (prop: string) => unknown
setFieldValue: (prop: string, value: unknown) => void
getFieldsValue: () => Record<string, unknown>
setFieldsValue: (patch: Record<string, unknown>) => void
submit: () => Promise<void>
save: () => Promise<void>
setSchema: (next: EllFormSchema[]) => void
getControlRef: (spec: EllFormBuilderFieldRefSpec) => unknown
getFormItemRef: (spec: EllFormBuilderFieldRefSpec) => unknown
formItemRef: ComputedRef<Record<string, unknown> | undefined>
}
jenemy