Ant Design Vue的表单布局

在Ant-Design-Vue中的文本框的布局和标签的长度管理

Ant Design Vue的栅格布局使用

1、布局行列创建使用,在form中创建列和行直接复制进即可


      
        col-8
      
      
        col-8
      
      
        col-8
      

2、在对应的得col中复制进对应的表单内容

 
          
            
              
            
          
          
            
              
            

          
          
            
              
            
          
        

3、配置每个表单内容的label宽度和文本框的宽度

配置项
labelCol: {
          xs: {span: 24},
          sm: {span: 8} //控制label的框的长度
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 10}//控制文本框的长度
        }

4、最终效果

Ant Design Vue的表单布局_第1张图片

你可能感兴趣的:(Ant,Design,Vue,vue)