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

最新推荐文章于 2024-08-03 23:22:49 发布
最新推荐文章于 2024-08-03 23:22:49 发布
阅读量1.3w 收藏 28
点赞数 17
文章标签： vue.js ui elementui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47390575/article/details/123250170
版权

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

如图所示：

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

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

全部代码：

效果图如下：

 

一个小辣椒
关注
  • 17
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
总之，“Vue ~ element-ui 动态表单验证”项目展示了如何利用Vue.js和Element-UI的强大功能，结合动态表单和验证规则，实现一个灵活且功能丰富的后台表单系统。通过掌握这些技术，开发者可以更高效地处理各种表单...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
例如，在一个包含姓名和地址的表格中，每个表格行（row）都有对应的`name`和`desc`字段，我们需要为每行创建对应的`el-form-item`，并动态设置`prop`。这可以通过`scope.$index`来实现，`scope.$index`是Element-UI...
vue的elementUI分两列
userzou的博客
06-03 4687
<el-row> <el-col :span="12"><div class="grid-content"></div></el-col> <el-col :span="12"><div class="grid-content"></div></el-col> </el-row>
vue 一行两列 遍历
A5120184120的博客
11-16 186
参考 参考
el-form表单使用
qq_42702382的博客
06-17 167
el-form使用
vue + element-ui el-form在el-table中的表单验证
qq_21976063的博客
12-11 3738
在开发过程中偶尔遇到el-table嵌套el-form，而且还需要表单验证的需求，如下图： 解决方案： 动态定义el-form-item的prop属性，保证唯一性，并设置独立的rules属性。 <el-form-item :prop="'applyDataList.' + scope.$index + '.value3'" :rules="applyRules.value3"> h...
vue js element-ui el-form表单封装 二次封装
daimakuangren123的博客
09-22 1381
这是一个封装了表单组件的思想。它使用了Vue.js框架和Element UI库来创建可复用的表单组件。该组件接受props作为输入，包括表单的各种配置项和数据。根据配置项的不同，组件内部会生成对应的表单元素，如输入框、下拉框、单选框、复选框等。同时，组件还提供了上传附件和预览功能。该封装思想的优点在于可以减少代码的冗余，提高代码的复用性和维护性。通过将表单的配置项和数据作为props进行输入，可以在使用组件的地方轻松定制表单的样式和行为，同时也可以方便地对表单的数据进行处理和提交。
vue3.0封装element-ui表单
weixin_筱玉的博客
04-15 1485
vue3.0封装element-ui表单
Vue+Element-UI el-form表单动态检验
weixin_52950296的博客
11-08 1424
Vue+Element-UI el-form表单动态检验
Vue中使用Element-ui form和el-dialog进行自定义表单校验&清除表单状态
月色真美121的博客
07-19 3715
Vue中使用Element-ui form和el-dialog进行自定义表单校验&清除表单状态
vue--element-ui 修改el-form-item__error样式
wlijun_0808的博客
06-03 3712
vue修改element-ui的样式
vue+element-ui form表单嵌套upload实现图片上传
ZHAOXINHA的博客
04-24 1780
upload上传之后服务器返回一串url，然后将url自动填入input框，随form表单一起提交到服务器 <el-form-item label="头像" prop="head"> <!-- <el-input v-model="addForm.head"></el-input> --> <div class="el-upload-img">
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
在Vue和Element-UI的开发过程中，我们常常遇到表单重置的问题，特别是当使用`resetFields()`方法时发现表单并未如预期那样被重置。这个问题通常涉及到多个方面，让我们逐一探讨解决方法。 首先，确保在HTML模板中...
vue.js element-ui validate中代码不执行问题解决方法
10-18
在Vue.js开发中，Element UI库提供了一套强大的表单组件和验证机制，方便开发者创建交互丰富的表单。然而，在实际使用中，我们可能会遇到validate方法不执行的问题，导致表单验证无法正常工作。本文将深入探讨这个...
vue3 二次组件封装【透传】
最新发布
小学都hold不住的工程shi
08-03 101
【代码】vue3 二次组件封装【透传】
JAVA毕业设计|ssm基于java的健身房管理系统的设计与实现vue包含文档代码讲解
2401_86480677的博客
08-03 182
前面提到的系统分析，系统设计最主要还是进行功能，系统操作逻辑的设计，也包括了存储数据的数据库方面的设计等内容，系统实现就是一个最终的实施阶段，将前面的设计成果进行物理转化，最终出具可以运用于实际的软件系统。如图5.4显示的就是健身器材列表页面，此页面提供给管理员的功能有：对全部的健身器材的一个管理、可以根据健身器材名称进行模糊查询、根据时间区间来进行判断器材的是否损坏。如图5.1显示的就是会员管理页面，此页面提供给管理员的功能有：对会员信息的一个管理，不同会员看到的页面是不一样的，会员信息也是不同的.
vue在Index.html中自定义全局变量
lllomh的博客
08-03 79
在inde.html定义整个项目都能访问的变量,用于判断等等。我这里是 赋值了 环境值. 可以改变任意值都行.当webpack覆盖不到的地方用这这个方便的.直接在 index.html中 js。要用的地方直接判断就行。
vue+element-ui form表单中显示图片
10-08
在Vue Element-UI的表单中显示图片，你可以使用Element-UI的Upload组件来实现。 首先，你需要在表单中添加一个Upload组件，用来上传图片： ```vue <template> <el-form> <el-form-item label="图片"> <el-upload class="upload-demo" action="/upload" // 这里需要填写图片上传的接口地址 :show-file-list="false" :on-success="handleSuccess" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> <img v-if="imageUrl" :src="imageUrl" style="max-width: 200px; max-height: 200px;" /> </el-form-item> </el-form> </template> <script> export default { data() { return { imageUrl: '' // 用来存储图片的URL } }, methods: { handleSuccess(response, file) { // 在上传成功后，将返回的图片URL赋值给imageUrl this.imageUrl = response.url; } } } </script> <style> .upload-demo { border: 1px dashed #ccc; border-radius: 6px; padding: 20px; text-align: center; } </style> ``` 在上述代码中，我们使用了`el-upload`组件来实现图片的上传功能。在上传成功后，会调用`handleSuccess`方法，将返回的图片URL赋值给`imageUrl`，然后在页面上使用`img`标签来显示图片。 请注意，你需要将`action`属性设置为你自己的图片上传接口地址。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值