Skip to content

useForm

基于 ElFormBuilder 的组合式封装:在钩子内持有 modelschema(可选 Ref)与 uid,模板中渲染返回的 Form 即可,无需手写 v-model / :schema

与直接使用 ElFormBuilder 一致,支持 actions、portal 锚点、submitHandler / saveHandler / resetHandler 等全部构建器能力;另有便捷方法对接 el-formdefineExpose(如 validategetControlRefsetSchema)。

基础用法

与历史方案的关系

早期草案中的 Form 单字母组件transform 提交流转errors 聚合updateSchema 细粒度补丁纳入当前 EllFormSchema / ElFormBuilder 实现范围。以本文与 packages/components/hooks/use-form 源码为准;schema 请用 setSchema 或持 Ref 自行替换。

API

useForm(options): UseFormReturn

options:在 ElFormBuilderProps 基础上去掉 modelValueschemaEllFormSchema[] | Ref<EllFormSchema[]>;其余字段(initialValuesgridactions 等)与原构建器相同。

成员说明
Form已绑定 model / schema / uidElFormBuilder 包装组件;支持默认插槽(与 ElFormBuilder 一致,透出 uidformRefmodel 等)
uid本次实例 uid(选项或内部 ulid
model表数据 ref
schemaschemaref(传入数组时由内部 ref 包装
builderRefElFormBuilder 组件实例(挂载后非空)
formRefComputedRef,指向 el-form(挂载后)
validate / validateField / clearValidate / scrollToField委托 FormInstance
resetFieldsresetFields + 合并 initialValues(与构建器内置重置一致)
getFieldValue / setFieldValue / getFieldsValue / setFieldsValue读写 model
submitvalidatesubmitHandler(model, formRef)(未挂载则 reject
savesaveHandler(model, formRef)(不校验)
setSchema全量替换 schema
getControlRef / getFormItemRef / formItemRefElFormBuilder expose 对齐

类型说明

主包导出:

ts
import type {
  EllFormSchema,
  EllUseFormBuilderRef,
  UseFormOptions,
  UseFormReturn,
} from 'element-plus-lab'
  • UseFormOptions / UseFormReturn:入参与返回值;EllFormSchemaElFormBuilder 一致。
  • EllUseFormBuilderRefbuilderRef 挂载后实例的形状(与 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>
}

贡献者

页面历史

Released under the Apache License 2.0.