diff --git a/components/FormBuilder/FormItemsRenderer.d.ts b/components/FormBuilder/FormItemsRenderer.d.ts index 491ee57..535ecf7 100644 --- a/components/FormBuilder/FormItemsRenderer.d.ts +++ b/components/FormBuilder/FormItemsRenderer.d.ts @@ -61,7 +61,7 @@ export interface FormOption { tip?: ReactNode; /** 是否隐藏,默认 false,支持函数动态计算 */ hidden?: boolean | ((formValues: FormValues) => boolean); - /** 是否自定义渲染,默认 false,将不生成 Form.Item */ + /** 是否自定义渲染,完全交给外部控制渲染,默认 false */ customizeRender?: boolean; /** 选项数据(用于 select、radio、checkbox) */ items?: OptionItem[]; diff --git a/components/FormBuilder/FormItemsRenderer.js b/components/FormBuilder/FormItemsRenderer.js index 311d44d..aa9e6a6 100644 --- a/components/FormBuilder/FormItemsRenderer.js +++ b/components/FormBuilder/FormItemsRenderer.js @@ -135,8 +135,8 @@ const FormItemsRenderer = ({ // 获取key const getKey = (option) => { - return option.key || option.name - } + return option.key || option.name; + }; // 渲染表单控件 const renderFormControl = (option) => { @@ -272,6 +272,23 @@ const FormItemsRenderer = ({ return ( <> {options.map((option, index) => { + // 列数 + const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span; + const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol); + const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span }; + + // 使用 style 控制显示/隐藏 + const style = collapse && index >= 3 ? { display: "none" } : undefined; + + // 如果是 customizeRender 类型,完全交给外部控制渲染 + if (option.customizeRender) { + return ( + + {option.render} + + ); + } + // 如果是 onlyForLabel 类型,不渲染任何UI,只在表单中保存数据 if (option.onlyForLabel) { return ( @@ -286,14 +303,6 @@ const FormItemsRenderer = ({ ); } - // 列数 - const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span; - const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol); - const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span }; - - // 使用 style 控制显示/隐藏 - const style = collapse && index >= 3 ? { display: "none" } : undefined; - // 如果是分割线 if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) { return ( @@ -306,43 +315,39 @@ const FormItemsRenderer = ({ // 如果配置了 shouldUpdate 或 dependencies,使用 Form.Item 的联动机制 if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) { return ( - option.customizeRender - ? (renderFormControl(option)) - : ( - - {() => { - // 支持动态计算 hidden - const hidden = typeof option.hidden === "function" - ? option.hidden(getFormValues()) - : (option.hidden ?? false); + + {() => { + // 支持动态计算 hidden + const hidden = typeof option.hidden === "function" + ? option.hidden(getFormValues()) + : (option.hidden ?? false); - if (hidden) - return null; + if (hidden) + return null; - return ( - - - {renderFormControl(option)} - - - ); - }} - - ) + return ( + + + {renderFormControl(option)} + + + ); + }} + ); } @@ -357,23 +362,17 @@ const FormItemsRenderer = ({ return ( - { - option.customizeRender - ? (renderFormControl(option)) - : ( - - {renderFormControl(option)} - - ) - } + + {renderFormControl(option)} + ); })}