场景

如果使用el-form默认的布局代码如下：

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>

这样生成的页面布局是一行一行的。

如果想要在一行中显示两个input怎样实现。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

可以通过el-row和el-col来实现。

类似于表格的行和列，通过设置多少行一行中有多少列来实现。

布局实现举例：

      <el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-row><el-col span="10"></el-col><el-col span="10"></el-col></el-row><el-row><el-col span="10"></el-col><el-col span="10"></el-col></el-row><el-row><el-col span="10"></el-col><el-col span="10"></el-col></el-row></el-form>

示例代码：

      <el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-row><el-col span="10"><el-form-item label="班次编号:" prop="bcbh"><el-input v-model="form.bcbh" placeholder="请输入班次编号" /></el-form-item></el-col><el-col span="10"><el-form-item label="班次名称:" prop="bcmc" label-width="100px"><el-input v-model="form.bcmc" placeholder="请输入班次名称" /></el-form-item></el-col></el-row><el-row><el-col span="10"><el-form-item label="班次类型:" prop="bclx"><el-select v-model="form.bclx" placeholder="请选择班次类型" clearable><el-optionv-for="dict in bclxOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select></el-form-item></el-col><el-col span="10"><el-form-item label="是否跨天:" prop="sfkt"><!-- `checked` 为 true 或 false --><el-checkbox v-model="form.sfkt" ></el-checkbox></el-form-item></el-col></el-row><el-row><el-col span="10"><el-form-item label="小时数:" prop="xss"><el-input v-model="form.xss" placeholder="请输入小时数" type="num" /></el-form-item></el-col><el-col span="10"><el-form-item label="是否夜班:" prop="sfyb"><!-- `checked` 为 true 或 false --><el-checkbox v-model="form.sfyb"></el-checkbox></el-form-item></el-col></el-row><el-form-item label="班中餐:" prop="bzc" span="10"><el-input v-model="form.bzc" placeholder="请输入班中餐" /></el-form-item><el-form-item label="备注:" prop="bz"><el-input v-model="form.bz" placeholder="请输入备注" /></el-form-item>
</el-form>

效果

ElementUI的el-form怎样格式化布局相关推荐

elementUI弹框form多元素表单问题 - 抛砖篇
疑问1:elementUI的这个MessageBox弹框能否添加多个表单元素? 疑问2:如果能添加多个,怎么添加? 疑问3:使用el-dialog组件如何调用? 通过上述实践,总结发现还是使用el-d ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
Element Form表单布局（一行多列）
ElementUI的页面布局,跟bootstrap一样,是24格栅栏形式的.因此,可以通过row和col组件,以及col组件的span属性,完成form的布局. <el-col :span=&q ...
EL表达式中格式化日期显示
场景在Jsp中通过EL表达式格式化显示日期. 实现在jsp中引入标签: <%@ taglib prefix="fmt" uri="http://java.sun ...
element-ui中el-container容器与div布局区分
用于布局的容器组件,方便快速搭建页面的基本结构: el-container:外层容器.当子元素中包含或时,全部子元素会垂直上下排列,否则会水平左右排列. el-header:顶栏容器. el-as ...
elementui 按钮表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
Vue + Element-ui实现后台管理系统---项目搭建 + ⾸⻚布局实现
目录:导读项目搭建 + ⾸⻚布局实现一.项目搭建 1.环境搭建 2.项目初期搭建二.Main.vue 三.左侧栏部分(CommonAside.vue) 四.header部分(CommonHead ...
ElementUI中的el-form怎样格式化显示1和0为是和否
场景某些字段代表是否怎样. 数据库中存储的是int型的1和0. 从数据中取出来的也是1和0. 怎样将其格式化为是和否注: 博客: https://blog.csdn.net/badao_liuma ...

ElementUI的el-form怎样格式化布局

场景

实现

效果

ElementUI的el-form怎样格式化布局相关推荐

最新文章

热门文章