我们还提供了用来进行结构化数据的录入:
ProFormList 与 Form.List API 基本相同,增加了自带的操作按钮:删除和复制,并且自带了了一个新建一行
按钮。
<ProFormListname="users"initialValue={[{useMode: 'chapter',},]}creatorButtonProps={{position: 'top',creatorButtonText: '再建一行',}}creatorRecord={{useMode: 'none',}}><ProFormSelectkey="useMode"options={[{value: 'chapter',label: '盖章后生效',},{value: 'none',label: '不生效',},]}width="md"name="useMode"label="合同约定生效方式"/></ProFormList>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
itemRender | 自定义 Item,可以用来将 action 放到别的地方 | doms,listMeta)=> ReactNode | - |
creatorRecord | 新建一行的默认值 | Record<string, any> | () => Record<string, any> | - |
creatorButtonProps | 新建一行按钮的配置 | buttonProps & { creatorButtonText:string,position:"top"|"bottom" } | {creatorButtonText:"新建一行"} |
label | 与 From.Item 相同 | ReactNode | - |
name | list 在 form 中的值,必填项 | NamePath | - |
alwaysShowItemLabel | Item 中总是展示 label | boolean | - |
min | 最少条目,删除时如果当前数据条目少于该数则无法删除 | number | - |
max | 最多条目,新增或复制时如果当前数据条目多于该数则无法新增或复制 | number | - |
ProFormList 支持传入一个方法来获取到当前行的信息和快捷操作,这对于复杂的联动来说是很方便的。
<ProFormList>{(// 当前行的基本信息 {name: number; key: number}meta,// 当前的行号index,/*** action* @name 用于操作行的一些快捷方法* @example 给第二行增加数据 action.add?.({},1);* @example 删除第二行 action.remove?.(1);* @example 从 1 移到 2: action.move?.(2,1);* @example 获取当前行的数据: action.getCurrentRowData() -> {id:"xxx",name:'123',age:18}* @example 设置当前行的数据: {id:"123",name:'123'} -> action.setCurrentRowData({name:'xxx'}) -> {id:"123",name:'xxx'}* @example 清空当前行的数据:{id:"123",name:'123'} -> action.setCurrentRowData({name:undefined}) -> {id:"123"}*/action,// 总行数count,) => {return (<div key="row"><ProFormText name="id" /><ProFormText name="name" /></div>);}}</ProFormList>
这四个参数的类型定义如下:
type RenderActionParams = {/*** @name 当前行的meta信息* @example {name: number; key: number}*/meta: FormListFieldData;/*** @name 当前行的行号*/index: number;/*** @name 用于操作行的一些快捷方法* @example 给第二行增加数据 action.add?.({},1);* @example 删除第二行 action.remove?.(1);* @example 从 1 移到 2: action.move?.(2,1);* @example 获取当前行的数据: action.getCurrentRowData() -> {id:"xxx",name:'123',age:18}* @example 设置当前行的数据: {id:"123",name:'123'} -> action.setCurrentRowData({name:'xxx'}) -> {id:"123",name:'xxx'}* @example 清空当前行的数据:{id:"123",name:'123'} -> action.setCurrentRowData({name:undefined}) -> {id:"123"}*/action: FormListOperation & {/*** @name 获取当前行的数据* @example getCurrentRowData -> {id:"xxx",name:'123',age:18}*/getCurrentRowData: () => any;/*** @name 设置当前行的数据* @example {id:"123",name:'123'} -> setCurrentRowData({name:'xxx'}) -> {id:"123",name:'123'}* @example {id:"123",name:'123'} -> setCurrentRowData({name:undefined}) -> {id:"123"}*/setCurrentRowData: (data: any) => void;};/*** @name 总行数*/count: number;};
ProFormFieldSet 可以将内部的多个 children 的值组合并且存储在 ProForm 中,并且可以通过 transform
在提交时转化。下面是一个简单的用法,可以方便的组合多个输入框,并且格式化为想要的数据。
<ProFormFieldSetname="list"label="组件列表"// 支持 两种方式,type="group" 会用input.group 包裹// 如果不配置 默认使用 spacetype="group"transform={(value: any) => ({ startTime: value[0], endTime: value[1] })}><ProFormText width="md" /><ProFormText width="md" /><ProFormText width="md" /></ProFormFieldSet>
ProFormDependency 是一个简化版本的 Form.Item,它默认内置了 noStyle 与 shouldUpdate,我们只需要配置 name 来确定我们依赖哪个数据,ProFormDependency 会自动处理 diff 和并且从表单中提取相应的值。
name 参数必须要是一个数组,如果是嵌套的结构可以这样配置 name={['name', ['name2', 'text']]}
。配置的 name 的值会在 renderProps 中传入。name={['name', ['name2', 'text']]}
传入的 values 的值 为 { name: string,name2: { text:string } }
。
<ProFormDependency name={['name']}>{({ name }) => {return (<ProFormSelectoptions={[{value: 'chapter',label: '盖章后生效',},]}width="md"name="useMode"label={`与《${name}》合同约定生效方式`}/>);}}</ProFormDependency>