element-ui中怎么让多个input框在一行显示

最新推荐文章于 2024-05-22 21:53:11 发布
最新推荐文章于 2024-05-22 21:53:11 发布
阅读量3.1k 收藏
点赞数
分类专栏： 前端 html 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54866636/article/details/123300387
版权
前端 同时被 2 个专栏收录
48 篇文章 7 订阅
订阅专栏
html
48 篇文章 0 订阅
订阅专栏 
<el-form>

<el-row>

??????????????????<el-col?span="12">

????????????????????<el-form-item >

? ? ? ? ? ? ?<el-input></el-input>
????????????????????</el-form-item>

??????????????????</el-col>

??????????????????<el-col?span="12">

? ? ? ? ? ? ? ? ?<el-form-item>

<el-input></el-input>

????????????????????</el-form-item>

??????????????????</el-col>

????????????????</el-row>

</el-form>

使用element分栏式布局，使用定义排在一行

默认一行长度为24

可以使用gutter定义每个输出框之间的间隔

良月生秋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui-api-2.x版本.zip
10-10
Element UI 是一个基于 Vue.js 的开源组件库，主要用于构建用户界面。它的2.x版本是其稳定且广泛使用的版本，提供了丰富的UI组件，适用于企业级Web应用的开发。本压缩包"element-ui-api-2.x版本.zip"包含了Element ...
怎么使＜el-input＞在同一行显示，在＜div＞或其它的父标签里不换行？
jakemanse的专栏
07-14 2万+
在正的HTML中，<input>标签是不换行，例如： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="Edit
Element表单一行多列布局问题
Ching | Blog
11-12 8262
ElementUI在使用表单的遇到的问题 在使用表单时候，想让两个表单处于同一行，但是不想使用inline,因为使用inline会导致所以表单都是并排显示，宽度不高换行。不美观且达不到原型图要求。 后使用el-col,完美解决这个问题，但却发现表单输入框无法聚集输入值了，后来才发现el-col需要搭配el-row以前使用。 <el-row> <el-col :span="10"> <el-form-item label="标题"> <el-in
vue 如何实现两个组件在同一行
最新发布
qq_33240556的博客
05-22 834
在 Vue 中，要使两个组件（如<el-input>和）并排显示在同一条线上，你可以利用 CSS 的布局属性，最常见的方式是使用 Flexbox 或 Grid 布局。
element UI element UI 两个el-input并排
☆夏の独憶☆
01-19 2674
element UI 两个el-input并排 在el-from里面添加 :inline=“true”
element-ui实现一列展示两个输入框
qq_44162778的博客
03-21 2040
element-ui实现一列展示两个输入框。
Vue使用element-ui一行要显示两个输入框
qq_53698348的博客
10-07 2637
我不小心漏了el-row，导致输入框无法正常输入。
el-form表单按钮并列
weixin_68221102的博客
01-11 1097
表单设计问题！
B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
m0_54849806的博客
02-26 1065
B站SpringBoot实战练习的资源 1. Sql下载地址： 2. 前端源码下载地址： 3. 后端源码下载地址 资源来源——网络资源搜索！github开源项目练习！ 1. Sql下载地址： 链接：点击我下载sql文件 提取码：yeb7 2. 前端源码下载地址： 链接：点我下载前端代码 提取码：yeb7 3. 后端源码下载地址 链接：点我下载前端代码 提取码：yeb7 如需在线api文档请联系 qq： 87395809, 表明来意 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自
Vue循环中多个input绑定指定v-model实例
10-14
当在`v-for`循环中生成多个`input`元素时，可以通过给每个`v-model`分配不同的值来实现不同`input`的独立绑定。例如，可以利用循环变量`index`或字符串拼接来创建唯一的`v-model`名。假设我们有一个数组`items`，每...
vue element table中自定义一些input的验证操作
10-15
由于我们是在`el-table`中使用，所以字段名需要加上行索引，以区分表格中的每一行数据： ```html <el-form-item :prop="'tableData.' + scope.$index + '.bookname'" :rules='formData.rules.name'> <el-input v-...
element-ui 离线中文文档api下载 版本2.4
11-19
Element UI 是一个基于 Vue.js 的开源组件库，主要用于构建用户界面。这个压缩包文件 "element-ui-api" 提供的是 Element UI 的离线中文文档，版本为2.4。这个版本的文档包含了所有从官网下载的外部 JavaScript 文件...
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
10-17
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个具有行内编辑功能的简单表格。Element UI是基于Vue.js的组件库，提供了丰富的UI元素，包括表格（Table），使得开发者能够轻松创建出美观且功能...
解决element UI 自定义传参的问题
10-18
如果在一个页面中有多个相同的`el-autocomplete`组件，为了区分哪个组件触发了事件，我们需要自定义额外的参数，如组件的索引(index)。下面是如何实现的： ```html <el-autocomplete v-model="state4" :fetch-...
elementUI多选框反选的实现代码
12-09
本文将围绕“elementUI多选框反选的实现代码”这一主题，详细解释如何实现一个具有多选、翻页、检索功能的对话框，并讨论在处理选中状态时遇到的问题及其解决方案。 首先，根据描述，我们有一个需求，即在点击...
Element_ui组件.rar
03-16
描述中的 "直接可以导入axure元组件" 意味着这个压缩包内的 "Element_Components_v2.0.0.rplib" 文件是一个 Axure 的库文件，其中包含了 Element UI 组件的各个部分，可以直接导入到 Axure 中，无需手动创建或设置每...
el-form-item 包含两个input, 校验这两个input
weixin_49035434的博客
06-23 4195
需求是这样的: 1.最大输入999(整数) 2.不能为空, 最少填一项 3.最大值必须大于最小值 4.可以选择年月日, 一年按照365天计算, 一月按照30天计算
Element-UI框架多个el-input标签并排
热门推荐
qq_39691676的博客
09-25 2万+
绑定:inline=“true” 属性
新手小白：elementUI的el-input在一行显示
yueyue1111111的博客
04-20 3201
在引用elementUI的表单组件（自定义的校验规则）时，想添加验证码一项，并且【发送验证码】的button想要实现和验证码的el-input在同一行。通过网上查询资料发现，有人提供了解决办法时使用diaplay：inline样式，尝试发现都没有效果（不知道是不是自己操作的原因！（样式有点丑还需要调整，但解决了一个小问题，所以记录一下）所以就另找解决办法，通过el-row的方法解决啦！希望大家有更好的解决办法。
vue3 element plus form 表单 同一字段 表单动态校验
03-14
Vue3 Element Plus是一套基于Vue3的UI组件库提供了丰富的组件和功能，其中包括了Form表单组件。在Element Plus中，可以通过动态校验来实现同一字段的表单动态校验。 在Vue3 Element Plus中，可以使用`el-form`组件来创建表单，通过`el-form-item`组件来包裹表单项。要实现同一字段的表单动态校验，可以使用`rules`属性来定义校验规则。 首先，需要在Vue组件中定义表单数据和校验规则。例如： ```javascript data() { return { form: { field1: '', field2: '' }, rules: { field1: [ { required: true, message: '字段1不能为空', trigger: 'blur' }, // 其他校验规则 ], field2: [ { required: true, message: '字段2不能为空', trigger: 'blur' }, // 其他校验规则 ] } } } ``` 然后，在模板中使用`el-form`和`el-form-item`组件来创建表单，并绑定数据和校验规则。例如： ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="字段1" prop="field1"> <el-input v-model="form.field1"></el-input> </el-form-item> <el-form-item label="字段2" prop="field2"> <el-input v-model="form.field2"></el-input> </el-form-item> </el-form> </template> ``` 最后，可以通过调用`validate`方法来触发表单校验。例如： ```javascript methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过，提交表单 } else { // 校验不通过，处理错误信息 } }); } } ``` 这样，就可以实现同一字段的表单动态校验了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值