front_library
/
zy-react-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化FormItemsRenderer

master
LiuJiaNan 2025-11-11 09:10:08 +08:00
parent eed1fded1e
commit bf88de6db9
2 changed files with 62 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/FormBuilder/FormItemsRenderer.d.ts vendored
View File

@ -61,7 +61,7 @@ export interface FormOption {
tip?: ReactNode; tip?: ReactNode;
/** 是否隐藏，默认 false，支持函数动态计算 */ /** 是否隐藏，默认 false，支持函数动态计算 */
hidden?: boolean | ((formValues: FormValues) => boolean); hidden?: boolean | ((formValues: FormValues) => boolean);
/** 是否自定义渲染，默认 false，将不生成 Form.Item */ /** 是否自定义渲染，完全交给外部控制渲染，默认 false */
customizeRender?: boolean; customizeRender?: boolean;
/** 选项数据（用于 select、radio、checkbox） */ /** 选项数据（用于 select、radio、checkbox） */
items?: OptionItem[]; items?: OptionItem[];

123
components/FormBuilder/FormItemsRenderer.js
View File

@ -135,8 +135,8 @@ const FormItemsRenderer = ({
// 获取key // 获取key
const getKey = (option) => { const getKey = (option) => {
return option.key || option.name return option.key || option.name;
} };
// 渲染表单控件 // 渲染表单控件
const renderFormControl = (option) => { const renderFormControl = (option) => {
@ -272,6 +272,23 @@ const FormItemsRenderer = ({
return ( return (
<> <>
{options.map((option, index) => { {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，只在表单中保存数据 // 如果是 onlyForLabel 类型，不渲染任何UI，只在表单中保存数据
if (option.onlyForLabel) { if (option.onlyForLabel) {
return ( 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) { if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
return ( return (
@ -306,43 +315,39 @@ const FormItemsRenderer = ({
// 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制 // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) { if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
return ( return (
option.customizeRender <Form.Item
? (renderFormControl(option)) key={getKey(option) || index}
: ( noStyle
<Form.Item preserve={false}
key={getKey(option) || index} shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
noStyle dependencies={option.dependencies || option?.componentProps?.dependencies}
preserve={false} >
shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate} {() => {
dependencies={option.dependencies || option?.componentProps?.dependencies} // 支持动态计算 hidden
> const hidden = typeof option.hidden === "function"
{() => { ? option.hidden(getFormValues())
// 支持动态计算 hidden : (option.hidden ?? false);
const hidden = typeof option.hidden === "function"
? option.hidden(getFormValues())
: (option.hidden ?? false);
if (hidden) if (hidden)
return null; return null;
return ( return (
<Col key={getKey(option) || index} span={itemSpan} style={style}> <Col key={getKey(option) || index} span={itemSpan} style={style}>
<Form.Item <Form.Item
name={option.name} name={option.name}
label={renderLabel(option)} label={renderLabel(option)}
rules={getRules(option)} rules={getRules(option)}
labelCol={itemLabelCol} labelCol={itemLabelCol}
wrapperCol={itemWrapperCol} wrapperCol={itemWrapperCol}
preserve={false} preserve={false}
{...getFormItemProps(option)} {...getFormItemProps(option)}
> >
{renderFormControl(option)} {renderFormControl(option)}
</Form.Item> </Form.Item>
</Col> </Col>
); );
}} }}
</Form.Item> </Form.Item>
)
); );
} }
@ -357,23 +362,17 @@ const FormItemsRenderer = ({
return ( return (
<Col key={getKey(option) || index} span={itemSpan} style={style}> <Col key={getKey(option) || index} span={itemSpan} style={style}>
{ <Form.Item
option.customizeRender name={option.name}
? (renderFormControl(option)) label={renderLabel(option)}
: ( rules={getRules(option)}
<Form.Item labelCol={itemLabelCol}
name={option.name} wrapperCol={itemWrapperCol}
label={renderLabel(option)} preserve={false}
rules={getRules(option)} {...getFormItemProps(option)}
labelCol={itemLabelCol} >
wrapperCol={itemWrapperCol} {renderFormControl(option)}
preserve={false} </Form.Item>
{...getFormItemProps(option)}
>
{renderFormControl(option)}
</Form.Item>
)
}
</Col> </Col>
); );
})} })}