事件与实例方法

ProForm Events

事件名	说明	回调参数
submit	校验通过且（若有 api）请求成功后触发	(response | formData, formData)
reset	点击重置按钮后触发	-

submit 事件接收两个参数：第一个为接口响应（配置了 api 时）或表单数据（未配置时），第二个始终为提交时的表单原始数据（formData）。

ProForm 暴露方法（Ref）

通过 ref 可调用：

方法	说明
submit()	手动触发提交（校验 + 请求）
reset()	重置表单为初始值
getFormData()	获取当前表单数据（副本）
setFormData(data)	设置整表数据
patchFormData(patch)	部分更新表单数据
validate()	触发表单校验，返回 Promise
clearValidate()	清除校验状态
setActiveTab(name)	主动切换到指定 tab（name 为 tabs[].name 配置值）
getActiveTab()	获取当前激活的 tab name
loading	当前是否处于加载中（ref）

<template>
  <ProForm ref="formRef" :config="formConfig" @submit="onSubmit" />
</template>

<script setup>
import { ref } from 'vue'

const formRef = ref(null)

formRef.value?.submit()
formRef.value?.reset()
const data = formRef.value?.getFormData()
formRef.value?.setFormData({ name: 'Tom' })
formRef.value?.patchFormData({ status: 1 })
await formRef.value?.validate()
formRef.value?.clearValidate()

ProFormPopup Events

事件名	说明	回调参数
update:visible	弹层显示状态变化	(visible: boolean)
submit	校验通过且请求成功后触发	(response | formData, formData)
save	点击保存且请求成功后触发	(response)
cancel	点击取消或关闭时触发	-

ProFormPopup 暴露方法（Ref）

方法	说明
setFormData(data)	设置整表数据
patchFormData(patch)	部分更新表单数据
getFormData()	获取当前表单数据（副本）
validate()	触发表单校验，返回 Promise
clearValidate()	清除校验状态
close()	仅关闭弹层（不触发 cancel 事件）
submit()	触发表单提交（校验 + 请求）
setActiveTab(name)	主动切换到指定 tab
getActiveTab()	获取当前激活的 tab name
loading	当前是否处于加载中（ref）

<template>
  <ProFormPopup ref="popupRef" v-model:visible="visible" :config="formConfig" />
</template>

<script setup>
import { ref } from 'vue'

const popupRef = ref(null)

popupRef.value?.setFormData({ name: 'Tom' })
popupRef.value?.patchFormData({ status: 1 })
const formData = popupRef.value?.getFormData()
await popupRef.value?.validate()
popupRef.value?.close()
popupRef.value?.submit()