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,