优化FormItemsRenderer

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[];

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 (
+            <Col key={getKey(option) || index} span={itemSpan} style={style}>
+              {option.render}
+            </Col>
+          );
+        }
+
         // 如果是 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,9 +315,6 @@ const FormItemsRenderer = ({
         // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
         if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
           return (
-            option.customizeRender
-              ? (renderFormControl(option))
-              : (
             <Form.Item
               key={getKey(option) || index}
               noStyle
@@ -342,7 +348,6 @@ const FormItemsRenderer = ({
                 );
               }}
             </Form.Item>
-                )
           );
         }
 
@@ -357,10 +362,6 @@ const FormItemsRenderer = ({
 
         return (
           <Col key={getKey(option) || index} span={itemSpan} style={style}>
-            {
-              option.customizeRender
-                ? (renderFormControl(option))
-                : (
             <Form.Item
               name={option.name}
               label={renderLabel(option)}
@@ -372,8 +373,6 @@ const FormItemsRenderer = ({
             >
               {renderFormControl(option)}
             </Form.Item>
-                  )
-            }
           </Col>
         );
       })}