feat(form): add `alwaysShowLines` prop

允许设置Form折叠时始终保持显示状态的行数 close: #1051

feat(form): add `alwaysShowLines` prop
允许设置Form折叠时始终保持显示状态的行数 close: #1051
无木
1 parent 61d853e6
Showing 5 changed files with 20 additions and 3 deletions
CHANGELOG.zh_CN.md
src/components/Form/src/hooks/useAdvanced.ts
src/components/Form/src/props.ts
src/components/Form/src/types/form.ts
src/views/demo/form/AdvancedForm.vue
@@ -3,6 +3,7 @@
 ### ✨ Features
  
 - **BasicTree** 添加搜索功能相关属性和方法
+- **BasicForm** 新增`alwaysShowLines`用于设置折叠时保留显示的行数
  
 ### 🐛 Bug Fixes
  
@@ -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
@@ -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),
@@ -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;
  
@@ -4,7 +4,7 @@
       <BasicForm @register="register" />
     </CollapseContainer>
  
-    <CollapseContainer title="超过3行自动收起" class="mt-4">
+    <CollapseContainer title="超过3行自动收起，折叠时保留2行" class="mt-4">
       <BasicForm @register="register1" />
     </CollapseContainer>
   </PageWrapper>
@@ -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,