fix(form): 修复表单项渲染中隐藏项的处理逻辑

- 添加了对隐藏项的判断和过滤,避免隐藏项被渲染
- 实现了按钮显示的精确控制逻辑
- 添加了查找最后一个需要显示按钮项的功能
- 优化了表单列表项的操作按钮显示条件
- 移动了 dependencies 和 shouldUpdate 属性的删除逻辑到正确位置
master
LiuJiaNan 2026-04-24 17:25:20 +08:00
parent cc92b6e59c
commit e9d670685d
1 changed files with 27 additions and 5 deletions

View File

@ -506,10 +506,11 @@ const FormItemsRenderer = ({
return ( return (
<Row gutter={gutter} key={field.key}> <Row gutter={gutter} key={field.key}>
{listOptions.map((listOption, listIndex) => { {listOptions.map((listOption, listIndex) => {
if (getHidden(listOption.hidden))
return null;
const col = getCol(listOption); const col = getCol(listOption);
const formItemProps = getFormItemProps(listOption); const formItemProps = getFormItemProps(listOption);
delete formItemProps.dependencies;
delete formItemProps.shouldUpdate;
const params = { const params = {
option: listOption, option: listOption,
@ -524,12 +525,33 @@ const FormItemsRenderer = ({
if (listOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST) if (listOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
return renderFormList(params); return renderFormList(params);
// 判断下一个是否是嵌套的 FormList如果是则在当前项后添加按钮 // 判断一个项是否需要显示按钮(不是 onlyForLabel 且不是隐藏的)
const isShowButton = (opt) => {
return !getHidden(opt.hidden) && !opt.onlyForLabel;
};
// 从后往前找,找到第一个需要显示按钮的项的索引
const findLastButtonIndex = () => {
for (let i = listOptions.length - 1; i >= 0; i--) {
const opt = listOptions[i];
if (opt.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
return i;
if (isShowButton(opt))
return i;
}
return -1;
};
// 判断下一个是否是嵌套的 FormList或者是 onlyForLabel/hidden 项
const nextOption = listOptions[listIndex + 1]; const nextOption = listOptions[listIndex + 1];
const isNextNestedFormList = nextOption && nextOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST; const isNextNestedFormList = nextOption && nextOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST;
const isNextNoButton = nextOption && !isShowButton(nextOption);
// 如果是最后一个表单项,或者下一个是嵌套的 FormList则在其后添加操作按钮 // 如果是最后一个需要显示按钮的项,或者下一个是嵌套的 FormList或者下一个不需要按钮则在其后添加操作按钮
if (listIndex === listOptions.length - 1 || isNextNestedFormList) { const lastButtonIndex = findLastButtonIndex();
if (listIndex === lastButtonIndex || isNextNestedFormList || isNextNoButton) {
delete formItemProps.dependencies;
delete formItemProps.shouldUpdate;
return ( return (
<Col key={getKey(listOption) || listIndex} span={col.span} style={style}> <Col key={getKey(listOption) || listIndex} span={col.span} style={style}>
<Form.Item <Form.Item