diff --git a/components/FormBuilder/FormItemsRenderer.d.ts b/components/FormBuilder/FormItemsRenderer.d.ts index d1f2d0c..7cb7a98 100644 --- a/components/FormBuilder/FormItemsRenderer.d.ts +++ b/components/FormBuilder/FormItemsRenderer.d.ts @@ -71,8 +71,8 @@ export interface FormOption { label?: ReactNode; /** 渲染类型 */ render?: FormItemRenderType; - /** 占据栅格列数,默认 12 */ - span?: number | string; + /** 占据栅格列数,默认 12,支持函数动态计算 */ + span?: number | string | ((formValues: FormValues) => number | string); /** 是否必填,默认 true,支持函数动态计算 */ required?: boolean | ((formValues: FormValues) => boolean); /** 验证规则 */ diff --git a/components/FormBuilder/FormItemsRenderer.js b/components/FormBuilder/FormItemsRenderer.js index 2caf336..cadfe51 100644 --- a/components/FormBuilder/FormItemsRenderer.js +++ b/components/FormBuilder/FormItemsRenderer.js @@ -206,9 +206,17 @@ const FormItemsRenderer = ({ return collapse && index >= 3 ? { display: "none" } : undefined; }; + // 获取 span + const getSpan = (span) => { + // 支持动态计算 span + return typeof span === "function" + ? span(getFormValues()) + : span; + } + // 列数 const getCol = (option) => { - const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span; + const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : (getSpan(option.span) ?? span); const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol); const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span }; return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol };