vue-vben-admin/src/views/demo/form/AdvancedForm.vue

<template>
  <PageWrapper title="可折叠表单示例">
    <CollapseContainer title="基础收缩示例">
      <BasicForm @register="register" />
    </CollapseContainer>

    <CollapseContainer title="超过3行自动收起，折叠时保留2行" class="mt-4">
      <BasicForm @register="register1" @advanced-change="onAdvancedChange" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { CollapseContainer } from '@/components/Container';
  import { PageWrapper } from '@/components/Page';

  const getSchamas = (): FormSchema[] => {
    return [
      {
        field: 'field1',
        component: 'Input',
        label: '字段1',
        colProps: {
          span: 8,
        },
        componentProps: {
          placeholder: '自定义placeholder',
          onChange: (e: any) => {
            console.log(e);
          },
        },
      },
      {
        field: 'field2',
        component: 'Input',
        label: '字段2',
        colProps: {
          span: 8,
        },
      },
      {
        field: 'field3',
        component: 'DatePicker',
        label: '字段3',
        colProps: {
          span: 8,
        },
      },
      {
        field: 'field4',
        component: 'Select',
        label: '字段4',
        colProps: {
          span: 8,
        },
        componentProps: {
          options: [
            {
              label: '选项1',
              value: '1',
              key: '1',
            },
            {
              label: '选项2',
              value: '2',
              key: '2',
            },
          ],
        },
      },
      {
        field: 'field5',
        component: 'CheckboxGroup',
        label: '字段5',
        colProps: {
          span: 8,
        },
        componentProps: {
          options: [
            {
              label: '选项1',
              value: '1',
            },
            {
              label: '选项2',
              value: '2',
            },
          ],
        },
      },
      // {
      //   field: 'field7',
      //   component: 'RadioGroup',
      //   label: '字段7',
      //   colProps: {
      //     span: 8,
      //   },
      //   componentProps: {
      //     options: [
      //       {
      //         label: '选项1',
      //         value: '1',
      //       },
      //       {
      //         label: '选项2',
      //         value: '2',
      //       },
      //     ],
      //   },
      // },
    ];
  };

  function getAppendSchemas(): FormSchema[] {
    return [
      {
        field: 'field10',
        component: 'Input',
        label: '字段10',
        colProps: {
          span: 8,
        },
      },
      {
        field: 'field11',
        component: 'Input',
        label: '字段11',
        colProps: {
          span: 8,
        },
      },
      {
        field: 'field12',
        component: 'Input',
        label: '字段12',
        colProps: {
          span: 8,
        },
      },
      {
        field: 'field13',
        component: 'Input',
        label: '字段13',
        colProps: {
          span: 8,
        },
      },
    ];
  }
  const [register] = useForm({
    labelWidth: 120,
    schemas: getSchamas(),
    actionColOptions: {
      span: 24,
    },
    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(),
      { field: '', component: 'Divider', label: '更多字段' },
      ...extraSchemas,
    ],
    actionColOptions: {
      span: 24,
    },
    compact: true,
    showAdvancedButton: true,
    alwaysShowLines: 2,
  });

  function onAdvancedChange(isAdvanced: boolean) {
    console.log('isAdvanced: ' + isAdvanced);
    if (isAdvanced) {
      // do something
    } else {
      // do something
    }
  }
</script>