feat(form): add `alwaysShowLines` prop

无木

2021-08-13 93f9a19aa16a3e9cb95338417c52d9a398e3f70b

feat(form): add `alwaysShowLines` prop

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

close: #1051

 CHANGELOG.zh_CN.md

@@ -3,6 +3,7 @@
### ✨ Features

- **BasicTree** 添加搜索功能相关属性和方法
- **BasicForm** 新增`alwaysShowLines`用于设置折叠时保留显示的行数

### 🐛 Bug Fixes


 src/components/Form/src/hooks/useAdvanced.ts

@@ -103,7 +103,7 @@
      }
      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

 src/components/Form/src/props.ts

@@ -59,6 +59,8 @@
  rulesMessageJoinLabel: propTypes.bool.def(true),
  // 超过3行自动折叠
  autoAdvancedLine: propTypes.number.def(3),
  // 不受折叠影响的行数
  alwaysShowLines: propTypes.number.def(1),

  // 是否显示操作按钮
  showActionButtonGroup: propTypes.bool.def(true),

 src/components/Form/src/types/form.ts

@@ -97,6 +97,8 @@
  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;


 src/views/demo/form/AdvancedForm.vue

@@ -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,