Schema Form - JSON 表单

SchemaForm 是根据 JSON Schema 来生成表单的工具。SchemaForm 会根据 valueType 来映射成不同的表单项

Tips: 如您遇到卡顿问题或有更高的性能要求可参考示例使用

API

SchemaForm 提供了与 ProForm 相同的 API,并且增加了部分 API,以下的 SchemaForm 新增的 API。

字段名称类型说明
layoutTypeProFormLayoutType使用的表单布局模式
stepsStepFormProps[]layoutType=steps中的分步表单配置,需要配置 columns 为数组使用
columnsProFormColumnsType | ProFormColumnsType[]表单的定义,一般是 json 对象,如果是分步表单,需要使用 json 数组来生成多个表单
shouldUpdate(newValues: Record<string, any>, oldValues: Record<string, any>) => boolean | boolean细粒化控制是否渲染。
true时会自动重新渲染表单项。
false时不会更新表单项但可以使用dependencies 触发更新
function 时根据返回值判断是否重新渲染表单项,等同直接赋值 truefalse 参考示例

ProFormLayoutType

字段名称说明
FormProForm 是基本的表单类型
ModalForm弹框表单,配置之后支持 ModalForm 的所有配置
DrawerForm抽屉表单,配置之后支持 DrawerForm 的所有配置
StepsForm|StepForm配置之后为分步表单,有两种模式一种使用 stepscolumns 来生成,一种是通过 layoutType=StepsForm 嵌套 layoutType=StepForm 来实现
LightFilter轻量筛选,配置之后支持 LightFilter 的所有配置
QueryFilter查询表单,配置之后支持 QueryFilter 的所有配置
Embed内嵌模式,只生成表单项,不生成 Form 可以混合使用

Schema 定义

SchemaForm 表单最重要就是 Schema 的类型定义,我们使用了与 table 的相同的表单定义,同时扩展了部分字段。

字段名称类型说明
keyReact.key确定这个列的唯一值,一般用于 dataIndex 重复的情况
dataIndexReact.key | React.key[]与实体映射的 key,数组会被转化 [a,b] => Entity.a.b
valueTypeProFieldValueType数据的渲渲染方式,我们自带了一部分,你也可以自定义 valueType
titleReactNode |(props,type,dom)=> ReactNode标题的内容,在 form 中是 label
tooltipstring会在 title 旁边展示一个 icon,鼠标浮动之后展示
valueEnum(Entity)=> ValueEnum | ValueEnum支持 object 和 Map,Map 是支持其他基础类型作为 key
fieldProps(form,config)=>fieldProps| fieldProps传给渲染的组件的 props,自定义的时候也会传递
formItemProps(form,config)=>formItemProps | formItemProps传递给 Form.Item 的配置
proFieldPropsproFieldProps设置到 ProField 上面的 props,内部属性
renderText(text: any, record: Entity, index: number, action: ProCoreActionType) => any修改的数据是会被 valueType 定义的渲染组件消费
render(dom,entity,index, action, schema) => React.ReactNode自定义只读模式的 dom,render 方法只管理的只读模式,编辑模式需要使用 renderFormItem
renderFormItem(schema,config,form) => React.ReactNode自定义编辑模式,返回一个 ReactNode,会自动包裹 value 和 onChange。如返回 false,null,undefined 将不展示表单项 请使用 dependency 组件控制是否渲染列
request(params,props) => Promise<{label,value}[]>从远程请求网络数据,一般用于选择类组件
paramsRecord<string, any>额外传递给 request 的参数,组件不做处理,但是变化会引起request 重新请求数据
dependenciesstring | number | (string | number)[]所依赖的 values 变化后,触发 renderFormItem,fieldProps,formItemProps 重新执行,并把 values 注入到 params 里 示例
hideInDescriptionsboolean在 descriptions 中隐藏
hideInFormboolean在 Form 中隐藏
hideInTableboolean在 Table 中隐藏
hideInSearchboolean在 Table 的查询表格中隐藏
columnsProFormColumnsType[] | (values) => ProFormColumnsType[]嵌套子项,valueType 为 dependency 时,请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[]
colPropsColProps在开启 grid 模式时传递给 Col
rowPropsRowProps开启栅格化模式时传递给 Row

代码示例

JSON 来生成表单

JSON 来生成分步表单

嵌入到 ProForm 中

使用 ProFormDependency

高性能代码示例

结合 shouldUpdate=false 和 dependencies 触发更新

动态控制是否重渲染