antdv form组件的layout属性

antdv form组件的layout属性
1、下图是我想要实现的效果

2、按如下代码，可是输入框没有和label在同一行，看起来很奇怪

      <a-form :form="applyformInline" labelAlign="left">
        <a-form-item label="发票类型">
          <a-radio-group name="radioGroup" :default-value="1" v-model="applyformInline.type">
            <a-radio :value="1">增值税普通发票</a-radio>
            <a-radio :value="2">增值税专用发票</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="发票内容">
          <a-select v-model="applyformInline.invoiceContent" placeholder="请选择发票内容" style="width: 100px">
            <a-select-option value="服务费">服务费</a-select-option>
            <a-select-option value="咨询费">咨询费</a-select-option>
            <a-select-option value="设备费">设备费</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="接收邮箱">
          <a-input v-model="applyformInline.email" placeholder="请输入接收邮箱"></a-input>
        </a-form-item>
        <a-form-item label="联系人">
          <a-input v-model="applyformInline.concat" placeholder="请输入联系人"></a-input>
        </a-form-item>
        <a-form-item label="联系人电话">
          <a-input  v-model="applyformInline.concatPhone" placeholder="请输入联系人电话"> </a-input>
        </a-form-item>
      </a-form>

3、在官网找到了一个表单布局属性
 layout        表单布局        'horizontal'|'vertical'|'inline'    

但是只加这个属性，没有什么效果

 

4、最终方案
    a-form-item 不需要改动
    a-from 加上   label-col  和  wrapper-col   属性  
    就可以实现想要的效果了！

      <a-form :form="applyformInline" labelAlign="left"  :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" >
      </a-form>

 

仔细看了官网之后，才发现form表单例子里面都写了这个两个属性