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

123
components/FormBuilder/FormItemsRenderer.js
View File

@ -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,43 +315,39 @@ 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
preserve={false}
shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
dependencies={option.dependencies || option?.componentProps?.dependencies}
>
{() => {
// 支持动态计算 hidden
const hidden = typeof option.hidden === "function"
? option.hidden(getFormValues())
: (option.hidden ?? false);
<Form.Item
key={getKey(option) || index}
noStyle
preserve={false}
shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
dependencies={option.dependencies || option?.componentProps?.dependencies}
>
{() => {
// 支持动态计算 hidden
const hidden = typeof option.hidden === "function"
? option.hidden(getFormValues())
: (option.hidden ?? false);
if (hidden)
return null;
if (hidden)
return null;
return (
<Col key={getKey(option) || index} span={itemSpan} style={style}>
<Form.Item
name={option.name}
label={renderLabel(option)}
rules={getRules(option)}
labelCol={itemLabelCol}
wrapperCol={itemWrapperCol}
preserve={false}
{...getFormItemProps(option)}
>
{renderFormControl(option)}
</Form.Item>
</Col>
);
}}
</Form.Item>
)
return (
<Col key={getKey(option) || index} span={itemSpan} style={style}>
<Form.Item
name={option.name}
label={renderLabel(option)}
rules={getRules(option)}
labelCol={itemLabelCol}
wrapperCol={itemWrapperCol}
preserve={false}
{...getFormItemProps(option)}
>
{renderFormControl(option)}
</Form.Item>
</Col>
);
}}
</Form.Item>
);
}
@ -357,23 +362,17 @@ const FormItemsRenderer = ({
return (
<Col key={getKey(option) || index} span={itemSpan} style={style}>
{
option.customizeRender
? (renderFormControl(option))
: (
<Form.Item
name={option.name}
label={renderLabel(option)}
rules={getRules(option)}
labelCol={itemLabelCol}
wrapperCol={itemWrapperCol}
preserve={false}
{...getFormItemProps(option)}
>
{renderFormControl(option)}
</Form.Item>
)
}
<Form.Item
name={option.name}
label={renderLabel(option)}
rules={getRules(option)}
labelCol={itemLabelCol}
wrapperCol={itemWrapperCol}
preserve={false}
{...getFormItemProps(option)}
>
{renderFormControl(option)}
</Form.Item>
</Col>
);
})}