Form 表单

动态配置式表单组件，支持模板式和函数式两种用法。

基础用法

通过配置快速生成表单。

自定义 label 与 error

TFormItem 的 label 和 error 除字符串外，可配置为 { compType, compProps } 使用动态组件；error 为字符串时作为插槽名，对应插槽内容会渲染在表单项错误区域。

• label：string 时作为文本或插槽名；对象时用 getComponent(compType) 渲染，常用于 Tooltip、图标等。
• error：string 时作为插槽名；对象时用动态组件渲染错误区域。

动态组件

支持使用 compType 配置不同的表单组件类型，compProps 传递组件属性。

插槽

通过 prop 对应插槽名称。

函数式用法

使用 useEplForm 创建表单组件。

API

属性

属性名	说明	类型	默认值
modelValue / v-model	表单数据对象	object	—
items	表单项配置	TFormItem[]	[]
rules	表单验证规则	FormRules	—

TFormItem 配置

属性名	说明	类型
label	标签文本或自定义标签组件	string | { compType: TCompType; compProps?: unknown }
prop	字段名	string
placeholder	占位文本	string
span	栅格占据的列数	number
hidden	是否隐藏	boolean
compType	组件类型	string | VNode | Component
compProps	组件属性	object
error	自定义错误展示（插槽名或动态组件）	string | { compType: TCompType; compProps?: unknown }

方法

EplForm 通过 ref 暴露底层 ElForm 实例，拥有 ElForm 的全部方法，常用如下：

方法名	说明	类型
validate	验证表单	() => Promise<boolean>
resetFields	重置表单	() => void

useEplForm

基于 useComponent 的函数式创建表单，返回表单组件与实例 ref，通过实例 ref 调用 validate、resetFields 等方法。

const [FormComp, formRef] = useEplForm({
  modelValue,
  rules,
  items,
});
// 校验：formRef.value?.validate()
// 重置：formRef.value?.resetFields()

参数

参数名	说明	类型
modelValue	表单数据对象	Ref<object>
rules	表单验证规则	FormRules
items	表单项配置	TFormItem[] | ComputedRef<TFormItem[]>

返回值

返回值为元组（也可解构为命名属性）：[formComp, formRef]

属性名	说明	类型
formComp	表单组件	Component
formRef	表单实例的 Ref	Ref<FormInstance | undefined>（ElForm 实例）

通过 formRef.value 调用 ElForm 实例方法，如 validate、resetFields 等。