【element-ui】如果一行【输入的东西很长】可以用el-row

已于 2022-03-14 11:16:24 修改
阅读量2.9k 收藏
点赞数
分类专栏： 【前端】 【踩坑】（熟，但是有问题） 文章标签： 前端
于 2022-03-11 17:04:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StrongerIrene/article/details/123429449
版权
本文探讨了如何使用el-row进行前端布局，它能根据宽度自动换行，但间距过小的问题需要注意。此外，提到了select和input组件可以设置为mini尺寸，并且介绍了省略label的替代方案。对于el-row的间距问题，建议寻找解决方案以优化视觉效果。
摘要由CSDN通过智能技术生成

1、如果一行【输入的东西很长】可以用el-row ，适配根据宽度换行
el-row会自动换行/适配，不写则不会
【但是，el-row也有个问题就是间距太小，不知道咋办】
2、select和input都可以自选尺寸 mini
3、带label=的，可以不用label直接文字
带label的展示出来用label，option>z这个里面是为了标签展示内容？<

StrongerIrene
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
总结一下，当使用Vue + Element-ui的下拉框`el-select`时，通过`@change`事件结合`$event`参数可以获取到选中的值，而通过额外传递的参数（如`scope`或自定义值）则可以获取到更多上下文信息。这种技巧适用于那些...
使用el-row及el-col页面缩放时出现空行解决方案
qq_71214810的博客
03-14 1184
当缩放到90%或者110%，选中下拉后，下方就会出现空行 el-row和el-col应该配合使用，并且el-col应该包含在el-row中。 如下图所示：当页面缩放时...
关于ElementUI 中Layout 布局不能换行的解决方案
New前端工厂的博客
08-23 4044
<div class="info-card" v-for="(i,inx) in Farea.length/4" :key="inx"> <el-row :gutter="24" > <el-col :span="6" v-for="(item,index) in Fareas(inx)" :key="index"> <div class="boxs"> .
Element 布局组件el-row和el-col 详解
最新发布
weixin_56176015的博客
06-21 1155
如下代码，即为将1行等分为2列，为了便于区分列，我们为列添加了不同的样式，另外注意<el-divider></el-divider>是分割线，此处用于区分不同的示例。>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。需要在分栏里面新增元素，才能实现分栏间隔，代码修改如下则间隔生效。此时需要注意的是，下面的写法，间隔是不生效的。属性，注意默认间隔为0。>每行24分栏布局</>分栏间隔 无效</>分栏间隔 有效</
element-ui，使用el-row、el-col布局页面布局变乱
前端小鱼
11-16 6613
elementui el-col布局错乱
el-row el-col书写不规范的问题，会换行
yusun1234的博客
11-28 684
使用elementUI组件一定要规范，不能省略，否者会发生意想不到的问题。
element ui表格设置不换行
moonla3的博客
12-16 1194
<span style="display: inline-block;white-space: nowrap;word-break: keep-all;">
elementUI 特定分辨率（如1920*1080）下el-row未超出一行却换行
weixin_47085255的博客
10-27 1284
却自动换行了（其他分辨率没有这个问题）。在1920*1080分辨率下，
使用Vue.js和Element-UI做一个简单登录页面的实例
10-18
如果输入不为空，则使用jQuery发送一个AJAX请求到后端的`login`接口，并在请求成功后根据响应数据提示用户登录成功或失败。 5. 后端交互： 尽管文章的描述中提到了后端代码的部分内容，但由于内容不完整且存在OCR...
使用element-ui table expand展开行实现手风琴效果
10-17
Element-UI是基于Vue.js的UI库，提供了丰富的组件供开发者使用，其中包括表格（Table）组件，它支持展开行以显示更多详细信息。 首先，手风琴效果是指在一个表格中，当一个行被展开时，其他所有已展开的行会自动...
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
- **响应式设计**：使用Element-UI的栅格系统（el-col和el-row）来适应不同屏幕尺寸。当侧边栏收缩时，主内容区域可能需要占据全部空间，而展开时则需要调整布局以显示侧边栏。 - **媒体查询**：结合CSS的媒体查询...
element-ui表格数据转换的示例代码
10-18
在使用Element UI框架开发后台管理系统时，表格模块的数据展示是至关重要的一部分。本文详细地介绍了在Element UI中进行表格数据转换的示例代码，并通过具体的业务场景来阐述如何应用这些代码。文章通过一个具体的...
element-ui使用el-row及el-col页面缩放时出现空行解决方案
weixin_43731788的博客
03-29 893
使用el-row及el-col页面缩放时出现空行解决方案。
flex圣杯布局实现自动换行
anny_mei的博客
12-10 289
效果如下 <el-row> <el-col :span="12" style="flex-flow: row nowrap;display:flex" > <i>计划名称：</i> <span style="flex: 1">{{ planDetail.name }}</span> </el-col> </el-row>
el-table禁止换行且默认宽度铺满
weixin_50116785的博客
11-16 1921
【代码】el-table禁止换行且默认宽度铺满。
Vue项目保持element组件同行，设置组件不自动换行
热门推荐
益添的博客
07-17 6万+
因为Vue是响应式的，所以就想做个计算器来用下，样式就使用了element。 想要做成的效果是这样一个加减乘除： X + Y = M 22 + 33 = 55 但是由于element中的组件自动换行了，所以出来的结果是这样的： &lt;el-row&gt; &lt;el-col :span="8"&gt;&lt...
ElementUI的row col布局在span超过24时仍并在一起的解决方案
Future1994的博客
12-14 1190
1、首先要注意，row 的 type 必须是 flex。
elementUI中el-row超出一行时，使用justify
weixin_42792507的博客
01-22 1万+
在vue项目中使用el-row布局时，如果el-col个数之和超过24之后，如果不用justify进行布局，那么会自动换行，否则，就会变成下面的效果： 如果想要使用justify进行布局，就需要在el-row上添加style=“flex-wrap: wrap; flex-direction: row”，就可以解决，效果如下： ...
element-ui el-form-item设置一行一个或者多个表单
06-06
element-ui中的el-form-item可以设置一行一个或者多个表单，具体的方式是通过设置el-form-item的prop属性来控制表单的布局，例如： 一行一个表单： ```html <el-form> <el-form-item label="姓名" prop="name"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值