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)}
+
);
})}