pro-components
pro-components copied to clipboard
👑 [需求]SchemaForm中当valueType是formList时,columns支持RenderProps模式
trafficstars
🔩 所属模块或组件
SchemaForm
🥰 需求描述
当valueType是formList时,columns支持函数格式,以支持ProFormList RenderProps 模式
⛰ 功能需求适用场景
List中某个column的数据发生变化时,希望通过action.setCurrentRowData修改本行数据
🧐 解决方案
https://github.com/ant-design/pro-components/blob/47fe90c1d90ef6b8e28bdbdda86a915454cb1d64/packages/form/src/components/SchemaForm/valueType/formList.tsx
export const formList: ProSchemaRenderValueTypeFunction = (item, { genItems }) => {
if (item.valueType === 'formList' && item.dataIndex) {
if (!item.columns || !Array.isArray(item.columns)) return null;
return (
<ProFormList
key={item.key}
name={item.dataIndex}
label={item.label}
initialValue={item.initialValue}
colProps={item.colProps}
rowProps={item.rowProps}
{...item.getFieldProps?.()}
>
{genItems(item.columns)}
</ProFormList>
);
}
return true;
};
这里支持columns作为renderProps
export const formList: ProSchemaRenderValueTypeFunction = (item, { genItems }) => {
if (item.valueType === 'formList' && item.dataIndex) {
if (!item.columns || (!Array.isArray(item.columns) && !isFunction(item.columns))) return null;
return (
<ProFormList
key={item.key}
name={item.dataIndex}
label={item.label}
initialValue={item.initialValue}
colProps={item.colProps}
rowProps={item.rowProps}
{...item.getFieldProps?.()}
>
{isFunction(item.columns) ? ((...args) => genItems(item.columns(...args))) : genItems(item.columns)}
</ProFormList>
);
}
return true;
};