arco design表单label和输入框的空间分布

表单空间分布

arco利用的栅格系统来实现label、input的大小分布

<a-form 
  :model="formData.form" 
  :label-col-props="{ span: 6 }" 
  :wrapper-col-props="{ span: 18 }"
>
    // 其它......
</a-form>

栅格系统中，默认空间总量24，在这里label空间6，表单输入input的空间为18，下面是效果：

如果空间改成一致，则label和input大小一致

<a-form 
  :model="formData.form" 
  :label-col-props="{ span: 6 }" 
  :wrapper-col-props="{ span: 6 }"
>
    // 其它......
</a-form>

这种栅格系统可以很好的规避表单大小规范不统一的问题。

栅格系统来划分表单分布

我们来看下面的例子：

这种将表单拆成了2行，空间均匀分布，这里使用了栅格系统

   <a-form :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="name" label="姓名">
            <a-input v-model="formData.form.name" placeholder="请输入姓名" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="phone" label="手机号">
            <a-input v-model="formData.form.phone" placeholder="请输入手机号" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="email" label="邮箱">
            <a-input v-model="formData.form.email" placeholder="请输入邮箱" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item>
            <a-space>
              <a-button type="primary">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button>
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
              <a-button type="text" @click="formData.search = !formData.search">
                <template #icon>
                  <icon-up v-if="formData.search" />
                  <icon-down v-else />
                </template>
                <template #default>{{ formData.search ? "收起" : "展开" }}</template>
              </a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16" v-if="formData.search">
        <a-col :span="6">
          <a-form-item field="address" label="地址">
            <a-input v-model="formData.form.address" placeholder="请输入地址" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="status" label="用户状态">
            <a-select v-model="formData.form.status" placeholder="请选择用户状态" allow-clear>
              <a-option value="1">停用</a-option>
              <a-option value="2">启用</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

在 form 表单内嵌套 <a-row> 栅格系统，这样就可以做到空间均匀分布