在vue项目里，Element-Ui中el-form 实现一行两个表单效果

最新推荐文章于 2025-03-07 15:53:14 发布
最新推荐文章于 2025-03-07 15:53:14 发布
阅读量1.4w 收藏 29
点赞数 18
文章标签： vue.js ui elementui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47390575/article/details/123250170
版权
本文详细介绍了如何使用ElementUI的Layout24分栏进行页面布局，并展示了如何将表单组件放入el-row和el-col中实现同行显示。通过调整表单大小，可以轻松定制所需的前端界面。示例代码和实际效果图片帮助理解整个过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.首先使用elementUi中的Layout 24分栏进行布局，将整个form表单放入24分栏里

如图所示：

2.再将需要同行显示的表单放入el-row中的el-col中去

3.然后再根据你的需求控制一下表单大小就ok啦 

全部代码：

效果图如下：

 

Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
总之，“Vue ~ element-ui 动态表单验证”项目展示了如何利用Vue.js和Element-UI的强大功能，结合动态表单和验证规则，实现一个灵活且功能丰富的后台表单系统。通过掌握这些技术，开发者可以更高效地处理各种表单...
elsa:elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，用于快速开发后台管理页面
05-09
:high_voltage: elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，适用于快速开发后台管理项目。 用法示例，见： Quickstart npm i elsa-vue -S // vue main.js import Vue from 'vue' ...
vue element-ui 表单纵排改为两列排放
souwer的博客
09-06 4892
vue element-ui 表单纵排改为两列排放
element-ui 动态表单实现一行两列
m0_67273584的博客
08-11 3708
参考element-ui的文档,再用el-row与el-col相结合实现动态表单一行两列功能
Element ui form表单校验规则总结
最新发布
weixin_52217243的博客
03-07 1889
自定义表单的校验规则需要使用validator函数，validator函数的参数有三个，其中rule指向该条规则对象，value传入需要校验的字段值，callback执行回调，使用方法是：callback(‘…’);。如果不传参表示验证通过，如果传入值则作为错误提示。<el-form-item label="姓名" prop="name"><input v-model="form.name" type="text" placeholder="请输入姓名">
element-ui的el-form表单一行两个显示效果
m0_48957210的博客
06-23 7801
element的form表单一行显示两个
Element Form表单布局（一行多列）
热门推荐
我的博客
05-27 3万+
ElementUI的页面布局，跟bootstrap一样，是24格栅栏形式的。因此，可以通过row和col组件，以及col组件的span属性，完成Form的布局。 <template> <div> <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini"> <e
element ui控制一行两个元素
weixin_45966674的博客
08-27 2955
然后我们可以通过 .el-form–inline .el-form-item的flex: 1 0 40%;来控制 40是一行两个。有些ui图会要求我们一行固定展示多少个 我这边要求的是一行展示liangge。需要在你的组件data中加上我这里用的变量 不然会报错的。当然 如果你要直接考我的代码。界面部分可以参考一下我写的。然后就会变成这样的效果。当我们把四十改成三十。
vue 页面使用两套el-form表单并且嵌套使用el-checkbox
m0_60907575的博客
11-04 1608
vue 页面使用两套el-form表单并且嵌套使用el-checkbox
Vue使用element-ui一行要显示两个输入框
qq_53698348的博客
10-07 3718
我不小心漏了el-row，导致输入框无法正常输入。
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
例如，在一个包含姓名和地址的表格中，每个表格行（row）都有对应的`name`和`desc`字段，我们需要为每行创建对应的`el-form-item`，并动态设置`prop`。这可以通过`scope.$index`来实现，`scope.$index`是Element-UI...
vue.js element-ui validate中代码不执行问题解决方法
10-18
在Vue.js开发中，Element UI库提供了一套强大的表单组件和验证机制，方便开发者创建交互丰富的表单。然而，在实际使用中，我们可能会遇到validate方法不执行的问题，导致表单验证无法正常工作。本文将深入探讨这个...
vue一个界面有两个form表单如何进行校验
weixin_45644355的博客
03-29 4099
<template> <div style="width: 500px; margin: 0 auto"> <el-form :model="ruleFormA" :rules="rules" ref="ruleFormA"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleFormA.name"&
el-form中五个el-form-item,我现在希望其中三个在一行中显示,另外两个分别一行
fury的博客
03-21 2630
如果你使用 Element UI 中的 el-form 和 el-form-item，并希望其中三个在一行显示，另外两个分别占据一行，可以通过设置不同的栅格布局来实现。el-form中五个el-form-item,我现在希望其中三个在一行中显示,另外两个分别一行。上述将三个下拉框单独摘出来,用el-row和el-col包括,这样就可以实现了,
element el-form表单同一行内多个元素
BaekZh的博客
04-08 1191
【代码】element el-form表单同一行内多个元素。
vue项目中使用Element多个Form表单同时验证
航仔的博客
01-23 3384
在项目中一个页面中需要实现多个Form表单，并在页面提交时需要对多个Form表单进行校验，多个表单都校验成功时才能提交。两个form表单，每个表单上都设置单独的model和ref，不能同时使用，否则每个表单上的校验提示会失效。
普通弹出框table表单样式和form表单常见样式：一行两个
m0_62823653的博客
09-28 1516
第一部分：表单样式第一部分：表单样式vue中弹出框table表单样式第二部分：colgroup。
element plus el-form双列布局及拓展任意布局
无心使然云中漫步
01-10 6214
布局和数据分离灵活扩展layout2.1 可以建立多个layout文件，批量引入（或动态引入）Form.vue中 ，Form.vue中利用动态组件component加载各个layout文件2.2 可以建立多个layout文件，批量引入（或动态引入）LayoutIndex.vue文件中，LayoutIndex.vue文件利用动态组件component加载各个layout文件，然后Form.vue中只渲染LayoutIndex，同时通过传参决定渲染那个layout。
Vue2.0结合Element-ui实战：前端项目搭建与页面布局
"这篇教程主要关注的是如何使用Vue2.0和Element-UI进行实战开发，分享了一个实际的案例，旨在帮助读者理解这两个技术的结合应用。教程中将使用vue-cli构建工具、vue-router进行路由管理、axios处理HTTP请求、moment...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值