ant-col+form实现多列布局异常问题——基础积累

在写后台管理系统的时候，经常会用到form表单多列展示的情况：
如下：

一行展示4列，布局排版应该如下：a-col中的span为6，这样就可以实现一行4个了。。。。

 <a-row class="widthstyle">
   <a-col :span="6">
     <a-form-model-item label="订单编号">
       <span>{{ 审单.OrderNo }}</span>
     </a-form-model-item>
   </a-col>
   <a-col :span="6">
     <a-form-model-item label="交期">
       <span> {{ 审单.DeliveryDays }}</span>
     </a-form-model-item>
   </a-col>
</a-row>

但是实际的效果有时候就会变成下面的：

布局排版并不会规规矩矩的一个接一个的排布，而是会错开。这样的话，效果就不太好看了。。。

解决办法：给a-row添加type="flex"，就可以了。

参考链接：https://blog.csdn.net/weixin_53791978/article/details/135685010

参考文章中提到，如果是正式环境添加了type="flex"还是会有问题的，需要设置最大高度才能解决。我这边并未测试，如果正式环境出现问题，我再处理。

完成，多多积累，多多收获！！！