Vue 表单布局_vue表单布局_code12313的博客-程序员秘密

技术标签: Vue学习笔记  vue.js  html  javascript  

 Vue代码

    <el-form :inline="true" class="demo-form-inline">
       <el-row :gutter="20" type="flex" justify="space-between">
         <el-col :span="12" style="background-color: coral;">
           <el-form-item label="姓名">
             <el-input></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12" style="background-color: #42b983;text-align:right">
          <el-form-item label="身份证号码">
            <el-input></el-input>
          </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20" type="flex" justify="space-between" >
         <el-col :span="12" style="background-color: coral;">
           <el-form-item label="性别">
             <el-input></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12" style="background-color: #42b983;text-align:right" >
           <el-form-item label="出生日期">
             <el-input></el-input>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>

页面样式:

 form中 :inline="true"代表在一行显示

el-row中 :gutter="20"  代表col中的栅格间距

type="flex" justify="space-between" 组合使用, 两端对其, justify属性还有center,end,space-around

el-col 中:span="12"代表把24平分12格,占row元素的一半。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/code12313/article/details/119953425

智能推荐

大数据开发岗面试复习30天冲刺 - 日积月累,每日五题【Day09】——Hbase3_Maynor996的博客-程序员秘密

前言大家好,我是程序员manor。作为一名大数据专业学生、爱好者,深知面试重要性,很多学生已经进入暑假模式,暑假也不能懈怠,正值金九银十的秋招接下来我准备用30天时间,基于大数据开发岗面试中的高频面试题,以每日5题的形式,带你过一遍常见面试题及恰如其分的解答。相信只要一路走来,日积月累,我们终会在最高处见。以古人的话共勉:道阻且长,行则将至;行而不辍,未来可期!本栏目大数据开发岗高频面试题主要出自大数据技术专栏的各个小专栏,由于个别笔记上传太早,排版杂乱,后面会进行原文美化、增加。历史

哪种ARM Cortex内核更适合我的应用:A系列、R系列、还是M系列?_r核 a核_ZenJack的博客-程序员秘密

ARM Cortex内核系列提供非常广泛的具有可扩展性的性能选项,设计人员有机会在多种选项中选择最适合自身应用的内核,而非千篇一律的采用同一方案。Cortex系列组合大体上分为三种类别:    ● Cortex-A—面向性能密集型系统的应用处理器内核    ● Cortex-R—面向实时应用的高性能内核    ● Cortex-M—面向各类嵌入式应用的微控制器内核 

百PB级Hadoop集群存储空间治理_�Horde�的博客-程序员秘密

现在这个世道,随便什么公司什么人都张嘴闭嘴大数据,连做个几十人的问卷都敢叫大数据调查分析。真是无知者无畏。但也真有不少公司是真的有足够大的数据量的,也确实是在用心做大数据。这些公司通常规模不小,但盈利不一定理想。就算能稳定盈利,也一定有不小的成本压力。因为,大数据如果真的够大,是真的很费钱。以我所在的公司为例,每年的服务器采购成本就已经好几千万,眼看奔着8位数去了。因此我们有很强的节省成本的...

Linux实战教学笔记14:用户管理初级(下)_weixin_30483013的博客-程序员秘密

第十四节 用户管理初级(下)标签(空格分隔): Linux实战教学笔记-陈思齐---更多资料点我查看1,用户查询相关命令id,finger,users,w,who,last,lastlog,groups本节主要介绍在用户管理中,查询用户的几种常见工具id,finger,w,who,last,lastlog,groups的用法。用户查询工具的原理:在用户管理中,...

现在如何注册台服服务器,《英雄联盟手游》台服注册 台服账号注册步骤图解..._weixin_39702649的博客-程序员秘密

lol手游台服账号怎么注册?台服现在已经公测了,国服的玩家在也不用去其他地区服务器进行体验了,在中文大区内进行对局,体验起来的感觉绝对会比其他地方要好很多,不过目前很多小伙伴还没有账号。下面就为大家带来lol手游台服账号攻略。 一、登陆注册页面 PS:这里各位需要注意的是,各位玩家需要准备一个台湾IP的加速。在加速成功之后在登陆《英雄联盟手游》台服官网注册账号,否则你注册的账号很可能不属于台湾地区...

随便推点

pcl 点云创建_pcl创建点云_8BitCat的博客-程序员秘密

1.pcl::PointCloud&lt;pcl::PointXYZ&gt; pointCloud;pcl::PointXYZ point;point.x = 2.0f - y;point.y = y;point.z = z;pointCloud.points.push_back(point);2.pcl::PointCloud&lt;pcl::PointXYZ&gt;::Ptr cloud (new pcl::PointCloud&lt;pcl::PointXYZ&gt;);for

Django(48)drf请求模块源码分析_Silent丿丶黑羽的博客-程序员秘密

前言APIView中的dispatch是整个请求生命过程的核心方法,包含了请求模块,权限验证,异常模块和响应模块,我们先来介绍请求模块请求模块:request对象源码入口APIView类中dispatch方法中的:request=self.iniialize_request(*args, **kwargs),源码如下:def initialize_request(self, reque...

CDQ分治&整体二分练习1——P4390 [BOI2007]Mokia 摩基亚_Love_mona的博客-程序员秘密

蒟蒻的垂死挣扎很裸的一道CDQ分治题,这题对于每个询问处理为二维前缀的形式,那么就可以分裂成四个查询,然后以时间、x、y三维做CDQ分治,大概怎么搞都可以吧。#include&amp;lt;iostream&amp;gt;#include&amp;lt;cstdio&amp;gt;#include&amp;lt;cstdlib&amp;gt;#include&amp;lt;cmath&amp;gt;#include&amp;lt;cstring&amp;gt...

[转]为什么我这么低端:一个程序员的自我修养_我一直想飞的博客-程序员秘密

为什么这么低端作为专职程序员2年多了,应该说我是一个半路出家的程序员,决定写程序只是不想这辈子到处漂,我希望有一个能够让我在一个小镇上工作三天休息四天的手艺而已,或许我只是想在一定的年龄到一个小镇上去做一个麦田的守望者,能够看着一帮孩子成长,让他们快乐,安全,自由的玩耍。初衷往往是美好的,到我编码到一定的阶段后,我发现自己爱好上了这份事业,因为我是一个喜欢思考的人,没事想着优雅的代码以及能够更

YYYY-MM-DD 的黑锅,我们不背!_浪尖聊大数据-浪尖的博客-程序员秘密

作者:兔子托尼啊https://zhuanlan.zhihu.com/p/101150248写这篇博文是记录下跨年的bug。去年隔壁组的小伙伴就是计算两个日期之间间隔的天数,因为跨年的原...

问题 E: 【例6.5】活动选择_云深不知处喵的博客-程序员秘密

题目描述学校在最近几天有n个活动,这些活动都需要使用学校的大礼堂,在同一时间,礼堂只能被一个活动使用。由于有些活动时间上有冲突,学校办公室人员只好让一些活动放弃使用礼堂而使用其他教室。现在给出n个活动使用礼堂的起始时间beginibegini 和结束时间endi(begini&amp;lt;endi)endi(begini&amp;lt;endi) ,请你帮助办公室人员安排一些活动来使用礼堂,要求安排的活动尽量多...

推荐文章

热门文章

相关标签