Element Form表单布局（一行多列）

ElementUI的页面布局，跟bootstrap一样，是24格栅栏形式的。因此，可以通过row和col组件，以及col组件的span属性，完成form的布局。

<el-col :span="12">
<el-form-item label="客户名称："><el-input  v-model="form.customerName"></el-input>
</el-form-item>
</el-col>

使用<el-col :span="12">就可以把一个 <el-form-item 变成一行两个，以此类推。

<template><div><el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini"><el-row><el-col span="8"><el-form-item label="谜面"><el-input v-model="dengmiQueryForm.mimian"></el-input></el-form-item></el-col><el-col span="8"><el-form-item label="谜目"><el-input v-model="dengmiQueryForm.mimu"></el-input></el-form-item></el-col><el-col span="8"><el-form-item label="谜格"><el-input v-model="dengmiQueryForm.mige"></el-input></el-form-item></el-col></el-row><el-row><el-col span="8"><el-form-item label="谜底"><el-input v-model="dengmiQueryForm.midi"></el-input></el-form-item></el-col><el-col span="8"><el-form-item label="作者"><el-input v-model="dengmiQueryForm.zuozhe"></el-input></el-form-item></el-col><el-col span="8"><el-form-item label="谜底字数"><el-input v-model="dengmiQueryForm.midiLength"></el-input></el-form-item></el-col></el-row><el-row><el-col><el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button><el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button></el-col></el-row></el-form></div>
</template><script>export default {name: "dengmiQuery",data() {return {dengmiQueryForm: {mimian:'',mimu:'',mige:'',midi:'',zuozhe:'',midiLength:''}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script><style scoped></style>

Element Form表单布局（一行多列）相关推荐

element form表单提交数据之后清空所有输入框
element form表单提交数据之后清空所有输入框首先el-form标签上的ref属性名和调方法名统一,还有要绑定所有表单数据的一个大对象就是 :model属性,然后prop属性绑定的值要和v- ...
简易封装 element form表单
1.Form 表单由输入框.选择器.单选框.多选框等控件组成,用以收集.校验.提交数据典型表单包括各种表单项,比如输入框.选择器.开关.单选框.多选框等. 在 Form 组 ...
element form表单validateField对部分表单字段进行校验时触发多次校验
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.为什么会触发多次? 二.使用示例总结前言提示:这里可以添加本文要记录的大概内容: 今天做表单校验发现 ele ...
vue element form 表单
<template><el-form :model="form" label-width=&quo ...
关于element form表单的验证错误提示信息位置没有出现在文本框下的问题
今天带我的大佬碰到一个有意思的坑,现象如图,错误提示没有在文本框下,而是出现在最左边的文字下. 原因:el-form 没有加上 label-width,默认宽度为0,导致验证错误的提示信息直接出现在了 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...

Element Form表单布局（一行多列）

Element Form表单布局（一行多列）相关推荐

最新文章

热门文章