diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index b3f77493802..fca530eb426 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -3,6 +3,7 @@
### ✨ Features
- **BasicTree** 添加搜索功能相关属性和方法
+- **BasicForm** 新增`alwaysShowLines`用于设置折叠时保留显示的行数
### 🐛 Bug Fixes
diff --git a/src/components/Form/src/hooks/useAdvanced.ts b/src/components/Form/src/hooks/useAdvanced.ts
index f8d49eaa40c..b8cd3d55f7f 100644
--- a/src/components/Form/src/hooks/useAdvanced.ts
+++ b/src/components/Form/src/hooks/useAdvanced.ts
@@ -103,7 +103,7 @@ export default function ({
}
return { isAdvanced: advanceState.isAdvanced, itemColSum };
}
- if (itemColSum > BASIC_COL_LEN) {
+ if (itemColSum > BASIC_COL_LEN * (unref(getProps).alwaysShowLines || 1)) {
return { isAdvanced: advanceState.isAdvanced, itemColSum };
} else {
// The first line is always displayed
diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts
index a165673c2d1..36237f407ed 100644
--- a/src/components/Form/src/props.ts
+++ b/src/components/Form/src/props.ts
@@ -59,6 +59,8 @@ export const basicProps = {
rulesMessageJoinLabel: propTypes.bool.def(true),
// 超过3行自动折叠
autoAdvancedLine: propTypes.number.def(3),
+ // 不受折叠影响的行数
+ alwaysShowLines: propTypes.number.def(1),
// 是否显示操作按钮
showActionButtonGroup: propTypes.bool.def(true),
diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts
index 0e84b133f9a..5793adc7068 100644
--- a/src/components/Form/src/types/form.ts
+++ b/src/components/Form/src/types/form.ts
@@ -97,6 +97,8 @@ export interface FormProps {
autoFocusFirstItem?: boolean;
// Automatically collapse over the specified number of rows
autoAdvancedLine?: number;
+ // Always show lines
+ alwaysShowLines?: number;
// Whether to show the operation button
showActionButtonGroup?: boolean;
diff --git a/src/views/demo/form/AdvancedForm.vue b/src/views/demo/form/AdvancedForm.vue
index 8cc53807b1d..03bb1657253 100644
--- a/src/views/demo/form/AdvancedForm.vue
+++ b/src/views/demo/form/AdvancedForm.vue
@@ -4,7 +4,7 @@
-
+
@@ -160,14 +160,26 @@
compact: true,
showAdvancedButton: true,
});
+ const extraSchemas: FormSchema[] = [];
+ for (let i = 14; i < 30; i++) {
+ extraSchemas.push({
+ field: 'field' + i,
+ component: 'Input',
+ label: '字段' + i,
+ colProps: {
+ span: 8,
+ },
+ });
+ }
const [register1] = useForm({
labelWidth: 120,
- schemas: [...getSchamas(), ...getAppendSchemas()],
+ schemas: [...getSchamas(), ...getAppendSchemas(), ...extraSchemas],
actionColOptions: {
span: 24,
},
compact: true,
showAdvancedButton: true,
+ alwaysShowLines: 2,
});
return {
register,