antdesgin of Vue Form表单input项横向排列

目录

一、效果图

二、实现思路

三、代码

四、总结

---

一、效果图

二、实现思路

1、思路介绍

使用栅格实现，将一行表单项视为1个row，里面的每一项视为collum，在每个col中写a-form-model-item，思路很简单 。

 主要问题是布局问题，如何控制这个row在表单中的位置。如图是仅仅用栅格横向排列后的表单

在官方文档中我们可以看到a-form的这两个参数，他们不仅可以用在a-form上还可以用在a-form-item中，当Item和 Form 同时设置时，以 Item 为准。这里我们用他们来控制表单布局，就像栅格嵌套一样，算清比例即可

2、栅格与表单比例计算介绍

        不知道如何计算比例的朋友，我这里给介绍一个简单例子！(先这样保存一下，稍后补全)

三、代码

    
        
            
            
        
    
    
        
            
            
        
    
    
        
            删除
         
     

四、总结

        关于 labelCol 和 wrapperCol 的具体数值根据自己所需调整，算一下比例啥的，我写的这个比例不太好算，建议不要太耗费时间算…

        我的form表单的 labelCol 和 wrapperCol 是 :labelCol="{ span:4 }"  :wrapperCol="{ span:14 }" 

        这里提供另一个横向排列的思路，就是把所有的东西都塞到一个a-form-model-item中，只要使用flex布局即可。但是由于我的所写的两个input都用到rule校验所以不能这么写。或者在另外想rule的解决办法呀~ 

    

        
        
        删除