diff --git a/components/FormBuilder/FormBuilder.js b/components/FormBuilder/FormBuilder.js index e797297..cb62a08 100644 --- a/components/FormBuilder/FormBuilder.js +++ b/components/FormBuilder/FormBuilder.js @@ -44,6 +44,7 @@ const FormBuilder = (props) => { diff --git a/components/FormBuilder/FormItemsRenderer.d.ts b/components/FormBuilder/FormItemsRenderer.d.ts index 2427966..2db7432 100644 --- a/components/FormBuilder/FormItemsRenderer.d.ts +++ b/components/FormBuilder/FormItemsRenderer.d.ts @@ -59,7 +59,7 @@ export interface FormOption { tip?: ReactNode; /** 是否隐藏,默认 false,支持函数动态计算 */ hidden?: boolean | ((formValues: FormValues) => boolean); - /** 是否自定义渲染,默认 false,将不生成 Col 和 Form.Item( 仅生效 render、items、itemsField、componentProps ) */ + /** 是否自定义渲染,默认 false,将不生成 Form.Item */ customizeRender?: boolean; /** 选项数据(用于 select、radio、checkbox) */ items?: OptionItem[]; @@ -69,9 +69,9 @@ export interface FormOption { componentProps?: Record | ((formValues: FormValues) => Record); /** 传递给 Form.Item 的属性,支持函数动态计算 */ formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps); - /** label 栅格配置 */ + /** label 栅格配置,默认直接使用外层的 labelCol,如果 span 等于 24,是外层的 labelCol.span 一半 */ labelCol?: ColProps; - /** wrapper 栅格配置 */ + /** wrapper 栅格配置,默认为 24 - labelCol.span */ wrapperCol?: ColProps; /** 是否应该更新(用于表单联动) */ shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean); diff --git a/components/FormBuilder/FormItemsRenderer.js b/components/FormBuilder/FormItemsRenderer.js index b4321ce..65b1d70 100644 --- a/components/FormBuilder/FormItemsRenderer.js +++ b/components/FormBuilder/FormItemsRenderer.js @@ -22,6 +22,7 @@ const { RangePicker } = DatePicker; */ const FormItemsRenderer = ({ options, + labelCol, span = 12, collapse = false, useAutoGenerateRequired = true, @@ -260,7 +261,11 @@ const FormItemsRenderer = ({ return ( <> {options.map((option, index) => { + // 列数 const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span; + const itemLabelCol = option.labelCol ? option.labelCol : (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol); + const itemWrapperCol = option.wrapperCol ? option.wrapperCol : { span: 24 - itemLabelCol.span }; + // 使用 style 控制显示/隐藏 const style = collapse && index >= 3 ? { display: "none" } : undefined; @@ -299,8 +304,8 @@ const FormItemsRenderer = ({ name={option.name} label={renderLabel(option)} rules={getRules(option)} - labelCol={option.labelCol} - wrapperCol={option.wrapperCol} + labelCol={itemLabelCol} + wrapperCol={itemWrapperCol} {...getFormItemProps(option)} > {renderFormControl(option)} @@ -318,22 +323,24 @@ const FormItemsRenderer = ({ return null; return ( - option.customizeRender - ? (renderFormControl(option)) - : ( - - - {renderFormControl(option)} - - - ) + + { + option.customizeRender + ? (renderFormControl(option)) + : ( + + {renderFormControl(option)} + + ) + } + ); })} diff --git a/components/Search/index.js b/components/Search/index.js index 945423e..4b8e525 100644 --- a/components/Search/index.js +++ b/components/Search/index.js @@ -80,6 +80,7 @@ const Search = (props) => {