diff --git a/src/components/FormBuilder/FormItemsRenderer.d.ts b/src/components/FormBuilder/FormItemsRenderer.d.ts index 570ba8c..3181bdd 100644 --- a/src/components/FormBuilder/FormItemsRenderer.d.ts +++ b/src/components/FormBuilder/FormItemsRenderer.d.ts @@ -3,7 +3,7 @@ import type { FormItemProps, Rule } from "antd/es/form"; import type { FormListFieldData } from "antd/es/form/FormList"; import type { Gutter } from "antd/es/grid/row"; import type { NamePath } from "rc-field-form/lib/interface"; -import type { ReactElement, ReactNode } from "react"; +import type { CSSProperties, ReactElement, ReactNode } from "react"; import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender"; import type { DeepPartial } from "./FormBuilder"; @@ -131,6 +131,10 @@ export interface FormOptionBase< dependencies?: FormOptionProperty; /** 是否仅用于保存标签,不渲染到页面上,只在表单中保存数据,默认 false */ onlyForLabel?: IsOnlyForLabel; + /** Col 的内联样式,会合并到 Col 的 style 上,支持函数动态计算 */ + colStyle?: FormOptionProperty CSSProperties)>; + /** Col 内部、Form.Item 之前渲染的标题节点,支持函数动态计算 */ + colTitle?: FormOptionProperty ReactNode)>; } /** @@ -157,6 +161,10 @@ export type FormOptionByRender< checkboxCol?: FormOptionProperty; /** Form.List 独有的属性 */ formListUniqueProps?: FormOptionProperty FormListUniqueProps) : never>; + /** FormList 每行的内联样式,仅 render 为 formList 时可用,支持函数按行计算 */ + rowStyle?: FormOptionProperty CSSProperties) : never>; + /** FormList 每行起始位置渲染的标题节点,仅 render 为 formList 时可用,支持函数按行计算 */ + rowTitle?: FormOptionProperty ReactNode) : never>; }; /** diff --git a/src/components/FormBuilder/FormItemsRenderer.js b/src/components/FormBuilder/FormItemsRenderer.js index 676491b..e352830 100644 --- a/src/components/FormBuilder/FormItemsRenderer.js +++ b/src/components/FormBuilder/FormItemsRenderer.js @@ -223,6 +223,34 @@ const FormItemsRenderer = ({ return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol }; }; + // 获取 col 样式 + const getColStyle = (option) => { + return typeof option.colStyle === "function" + ? option.colStyle(getFormValues()) + : option.colStyle; + }; + + // 获取 col 标题(Col 内部、Form.Item 之后) + const getColTitle = (option) => { + return typeof option.colTitle === "function" + ? option.colTitle(getFormValues()) + : option.colTitle; + }; + + // 获取 row 样式(FormList 的每一行) + const getRowStyle = (option, field, fieldIndex) => { + return typeof option.rowStyle === "function" + ? option.rowStyle(field, fieldIndex) + : option.rowStyle; + }; + + // 获取 row 标题(FormList 每行末尾) + const getRowTitle = (option, field, fieldIndex) => { + return typeof option.rowTitle === "function" + ? option.rowTitle(field, fieldIndex) + : option.rowTitle; + }; + // 获取是否动态表单项 const getIsDynamicFormItem = (option, formItemProps) => { return (option.shouldUpdate ?? option.dependencies) || (formItemProps.shouldUpdate ?? formItemProps.dependencies); @@ -274,7 +302,7 @@ const FormItemsRenderer = ({ case FORM_ITEM_RENDER_ENUM.SELECT: return ( - {(option.items || []).map((item) => { const { value, label, disabled } = getSelectableItemAttributes(item, itemsFieldKey); return ( @@ -434,7 +462,8 @@ const FormItemsRenderer = ({ return null; return ( - + + {getColTitle(option)} + + {getColTitle(option)} {(fields, { add, remove, move }) => ( <> {fields.map((field, fieldIndex) => { const listOptions = getListOptions(formListUniqueProps.options, field, fieldIndex, add, remove, move); + const rowStyle = getRowStyle(option, field, fieldIndex); + const rowTitle = getRowTitle(option, field, fieldIndex); return ( - + + {rowTitle} {listOptions.map((listOption, listIndex) => { const col = getCol(listOption); const formItemProps = getFormItemProps(listOption); @@ -574,7 +607,8 @@ const FormItemsRenderer = ({ delete formItemProps.shouldUpdate; return ( - + + {getColTitle(listOption)}
-
+