element-ui的el-col没有数据，其内容为空时，不占据空间的问题

最新推荐文章于 2024-06-21 15:20:45 发布
最新推荐文章于 2024-06-21 15:20:45 发布
阅读量4.4k 收藏 7
点赞数 6
分类专栏： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42190844/article/details/119750832
版权

el-col 透明边框 数据渲染 布局调整 前端开发
关键词由CSDN通过智能技术生成

在写页面时，用了el-row和el-col进行布局。对接接口，v-for渲染数据 到对应位置时，发现了这个问题。第一次遇到，作个记录。

html
在这里插入图片描述
amtn_total_debit 应该是空的， amtn_total_credit为260.50，是有数据的，应该出现在右边。
但由于第一个没有数据，el-col会直接不占据空间，把右边的el-col挤到了左边
在这里插入图片描述
在这里插入图片描述

解决办法

给el-col加一个透明边框，这样即使没有内容，也会默认占据空间。视图渲染就不会出错了。

在这里插入图片描述
效果：
在这里插入图片描述

流浪码农~
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
IE浏览器 多个el-col之间有空白区域
weixin_42371145的博客
05-14 4963
IE浏览器中如下图， 1 首先不知道什么原因有没有，无语了无语了。。。。。 2 解决方法： 问题代码如下，非常规整的el-col： <el-col :span="12"> <span>员工姓名：</span> <div class="dialog-decontent">{{userObj.userName}}</div&gt...
el-row/col，内容为空的时候保持占用，对齐，分块儿
weixin_52223020的博客
08-03 1532
但是当这个比如实验期别为空的时候，页面 右边项目状态：0. 直接左移了。有什么办法就用el-col来搞定这个问题，没有值的时候空白占用。直接在外面再套一个el-col，一行两个字段各占12，在12里面又细分一个字段左边占8，右边占用12.这样子就可以解决字段。el-row把页面一行分为了24份，前几天vue组件化，就用div实现展示一个项目信息，比如这个一行分的3，每个8，每一个8里面再划分。这样子传的值为空的时候，直接空白但是会占用。拿到需求，展示10个字段，字段后面就是值。这样子可以整齐的展示。
vue页面空白问题
贺天远 廊坊师范学院信息技术提高班十五期
08-19 1947
今天弄vue页面，发现当我访问根目录的时候是一个空白页面，于是我尝试访问其他的页面，也是空白页面，我就意识到这可能是路由出了问题。 重复路由 于是我对路由进行了排查，发现有一个重复的路由。 多余路由 然后排除重复路由之后我发现页面还是空白，于是我继续查看自己的路由表，对比发现我有几个路由因为不用了就将文件的进口给删除了。 上面的进口中没有下面这三个路由的进口。于是我将下面三个路由删除之后页面就正常了。 ...
Element 布局组件el-row和el-col 详解
最新发布
weixin_56176015的博客
06-21 1134
如下代码，即为将1行等分为2列，为了便于区分列，我们为列添加了不同的样式，另外注意<el-divider></el-divider>是分割线，此处用于区分不同的示例。>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。需要在分栏里面新增元素，才能实现分栏间隔，代码修改如下则间隔生效。此时需要注意的是，下面的写法，间隔是不生效的。属性，注意默认间隔为0。>每行24分栏布局</>分栏间隔 无效</>分栏间隔 有效</
el-col内容为空时，整个el-col不显示。
Queen-Shir的博客
05-30 4568
问题：其中一个<el-col>中内容为空，或者el-col内部html标签也为空，则这个el-col整体就不显示。 解决方案：给<el-col>设置 style="min-height:1px;" 就可以了。
解决el-col无内容且需占位
qq_37483879的博客
01-12 1456
el-col占位
使用element-ui，el-row中的el-col数据为空页面布局变乱
热门推荐
有梦想の程序猿的博客
08-20 1万+
大家可能在使用el-row el-col进行布局的时候，可能会出现没有数据，el-col没有占位，如下图1的情况： 　 上图2是代码，在数据为空的时候。下图1为有数据之后： 　 上图2是加上数据之后的代码，el-row el-col布局就没问题了。 在数据为空的时候怎么可以让布局不乱呢。 在网上查了好久，都是加css样式 //第一种给一个最高度，让它占位 .el-col{ min-height: 1px; } //第二种给一个透明的边框，也是为了占位 .el-col{ bor
element-ui el-col 没有内容时仍然占据空间
happy monkey
12-02 6605
解决方案： 给el-col添加一个透明的border样式 没加border样式时 加了border 样式后 这样就解决了，el-col 没内容时，仍然占据空间.
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
当侧边栏收缩时，主内容区域可能需要占据全部空间，而展开时则需要调整布局以显示侧边栏。 - **媒体查询**：结合CSS的媒体查询（`@media`），可以实现不同屏幕尺寸下的侧边栏收缩与展开逻辑。 5. **源码解析**： ...
vue+element-ui使用
01-06
Element UI 还提供了很多其他功能强大的组件，比如对话框（`el-dialog`）、表单组件（`el-form`、`el-input` 等）、导航（`el-menu`、`el-breadcrumb` 等）和数据展示组件（`el-table`、`el-tree` 等）。每个组件都...
element-ui 2.15.9下载到本地资源最新版本压缩包（附element-ui本地引用方法）
06-04
本地引用示例： <!... <title>my <script src="/my/html/vue.min.js"></script> <script src="/my/html/element-ui/lib/index.js"> ... <el-col :span="24"><div class="myclass"></div></el-col> </el-row>
element-ui 关于获取select 的label值方法
10-18
在Element UI框架中，`el-select`组件是一个常用的下拉选择器，用于展示一组可选项供用户选择。本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. ...
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
在Vue.js中，Element-UI库提供了一个强大的表格组件（`el-table`），它允许开发者构建功能丰富的数据展示表格。然而，在某些情况下，我们可能需要对表格中的单元格进行合并，比如当上下两行的数据完全相同时。这有助...
el-row,el-col当没有内容时，默认高度为0
weixin_44707050的博客
11-05 972
解决：当没有内容时； <el-col>&nbsp;</el-col>
el-col不占位问题
m0_57364615的博客
01-03 292
element
解决el-col没值 不占位的问题
一名女程序猿的博客
12-13 2192
解决方法：加一个css .el-col{ border:1px solid transparent } 即使el-col没内容也会自动占位，不会往前推了
实现el-table-column列宽根据内容自适应且无数据时自动撑开表头
megamind0430的博客
04-23 5323
使用element-ui在移动端进行数据展示时，表头都是根据设定width和min-width来撑开的。但有时单条数据的内容会很多，不希望每个表格的高度不一致，所以有了希望根据表格数据最长的长度来设置表头宽度的需求。 这里是利用了一个插件ExTableColumn，具体操作方法： 通过继承实现el-table-column列宽根据内容自适应 大神写的插件，用npm下载到项目中，根据里边的步骤配置，是可用的。 但使用的时候遇到了一些问题，记录一下。 1.表格没有任何变化，但是表格里面的数据内容超出了边.
element-ui使用el-row及el-col页面缩放时出现空行解决方案
weixin_43731788的博客
03-29 876
使用el-row及el-col页面缩放时出现空行解决方案。
el-col占位
m0_56552153的博客
08-09 1850
el-col内容空白时占位 //第一种给一个最高度，让它占位 .el-col{ min-height:1px; } //第二种给一个透明的边框，也是为了占位 .el-col{ border:1pxsolid transparent; }
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"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="form.age"></el-input> </el-form-item> </el-form> ``` 一行多个表单： ```html <el-form> <el-row> <el-col :span="12"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="年龄" prop="age"> <el-input v-model="form.age"></el-input> </el-form-item> </el-col> </el-row> </el-form> ``` 在第二个例子中，通过el-row和el-col来控制表单的布局，el-col的span属性控制列的宽度，这里将一行分成了两列，每列占据一半的宽度。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值