Skip to content

RequestForm 请求表单

xy-request-form 适合需要“先拉详情再编辑”或者“表单提交由页面请求承接”的后台录入场景。

基础用法

第一版可以先把它当作带请求边界的 ProForm 来用,逐步接入真正的加载和提交逻辑。

审批流设置

当前示例关闭即时请求,只演示加载/提交边界。

说明
尚未提交。

当前定位

  • 负责初始加载、提交请求和表单骨架的统一收口。
  • 适合详情编辑、配置保存这类“读一次、改一次”的场景。

当前边界

  • 当前不内建错误映射、字段级回滚和复杂请求缓存策略。
  • 更复杂的数据依赖和多段提交仍建议由页面层编排。
  • 当只承担“请求后查看”职责时,可以直接开启 readonly,内部会复用 ProForm 的查看态展示协议。

RequestForm API

RequestForm Attributes

属性说明类型默认值
title表单标题string''
description表单说明文案string''
model表单数据对象,初始请求结果会合并回该对象Record<string, unknown>-
schemaschema 驱动的字段配置数组ProFieldSchema[][]
rules表单校验规则FormRules{}
label-width表单项 label 宽度string / number'112px'
label-positionlabel 位置'left' / 'top''top'
size表单尺寸ComponentSize'md'
readonly是否只读booleanfalse
immediate挂载后是否立即执行 initial-requestbooleantrue
initial-request初始加载请求,未提供时直接使用 model 当前值作为初始快照(ctx: ProRequestContext) => Promise<Record<string, unknown>>undefined
submit-request提交请求,未提供时校验通过即视为提交成功(ctx: RequestFormSubmitContext) => Promise<unknown>undefined

RequestForm Events

事件名说明参数
request-success初始加载成功时派发,携带请求结果(payload: Record<string, unknown>) => void
request-error初始加载失败时派发(error: unknown) => void
submit-success提交请求成功时派发,携带请求结果(payload: unknown) => void
submit-error提交请求失败时派发(error: unknown) => void

RequestForm Slots

插槽说明接收参数
default自定义表单项内容,透传给内部 xy-pro-form{ model }

RequestForm Exposes

名称类型说明
reload() => Promise<void>重新执行初始加载请求
refresh() => Promise<void>刷新初始数据
reset() => Promise<void>将 model 回填为初始快照并重新加载
submit() => Promise<boolean>校验通过后执行提交请求,返回是否成功