自定义表单的布局

通过设置配置项 col，你可以实现表单组件的布局自定义。不同的 UI 框架支持不同的布局系统，例如栅格布局和 flexbox。以下是如何使用这些布局规则来定制你的表单。

element-ui Col | ant-design-vue Col | naive-ui Col | arco-design Col | t-design Col

使用内置col布局规则

在 form-create 中，col 配置项用于设置组件的布局。如果未设置 col，默认布局为 { span: 24 }，即每个组件占满整行。你可以通过 col 属性来调整组件在表单中的宽度和排列方式。

col24

col12

col12

col8

col8

col8

col8|offset8

复制成功!

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          title: 'col24',
          field: 'col24_1',
        },
        {
          type: 'input',
          title: 'col12',
          field: 'col12_1',
          col: {
            span: 12
          }
        },
        {
          type: 'input',
          title: 'col12',
          field: 'col12_2',
          col: {
            span: 12
          }
        },
        {
          type: 'input',
          title: 'col8',
          field: 'col8_1',
          col: {
            span: 8
          }
        },
        {
          type: 'input',
          title: 'col8',
          field: 'col8_2',
          col: {
            span: 8
          }
        },
        {
          type: 'input',
          title: 'col8',
          field: 'col8_3',
          col: {
            span: 8
          }
        },
        {
          type: 'input',
          title: 'col8|offset8',
          field: 'col8_8',
          col: {
            span: 8,
            offset: 8
          }
        }
      ]
    }
  }
}
</script>

使用栅格布局组件

为了实现更灵活的布局，你可以使用栅格布局组件来手动控制组件的位置和大小。不同的 UI 框架提供了栅格布局组件，例如 Element UI 的 Col、Ant Design Vue 的 Col，你可以根据具体需求选择合适的栅格组件。

活动日期

排序

复制成功!

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'row',
          style: {width: '100%'},
          native: true,
          children: [
            {
              type: 'col',
              props: {
                span: 12,
              },
              native: true,
              children: [
                {
                  type: 'datePicker',
                  title: '活动日期',
                  field: 'section_day',
                  value: ['2018-02-12', '2021-11-20'],
                  props: {
                    picker: 'date',
                    range: true
                  },
                  wrap: {
                    labelCol: {
                      span: 8,
                    }
                  }
                },
              ]
            },
            {
              type: 'col',
              props: {
                span: 12,
              },
              native: true,
              children: [
                {
                  type: 'inputNumber',
                  title: '排序',
                  field: 'sort',
                  value: 0,
                  props: {
                    precision: 2
                  },
                  wrap: {
                    labelCol: {
                      span: 8,
                    }
                  },
                  validate: [{require: true, type: 'number', min: 10, message: '最小为10'}]
                },
              ]
            },
          ]
        },
      ]
    }
  }
}
</script>