页面使用弹性布局，使用elementUI的Table高度等于父盒子的100%时候，table出现上缩动画

最新推荐文章于 2024-06-12 14:41:35 发布
最新推荐文章于 2024-06-12 14:41:35 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： 随笔 文章标签： elementui 动画 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45397914/article/details/120816063
版权
当在弹性布局中，ElementUI的Table设置高度为父盒子100%时，会出现向上缩的加载动画。问题源于height: 100%未明确指定相对高度的元素。解决方法是在CSS中使用position属性来确定其相对高度的参照元素，从而避免动画效果。
摘要由CSDN通过智能技术生成

    最近工作中有一个页面布局使用弹性布局，高度限定屏幕高度，使用elementUI的table时，因为想要他的高度等于其父盒子的高度的，所以table使用了height=100%;但是这是会发现其页面第一次出现，table的高度会出现一个向上缩的动画。要消除这种动画效果,通过查阅资料，这样的原因是因为高度height的100%没有绝对定义其相对元素是哪个，就会出现逐层向上寻找。要消除这种动画，在样式中使用position来决定其相对谁的高度。
eg:

div{
   
	display: flex;
    flex-direction: column; 
}
div .father {
   
	flex: 1;
	posit
最低0.47元/天 解锁文章
zmh_vicky
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
优雅的elementUI table单元格可编辑实现方法详解
10-17
在本文中，我们将详细探讨如何优雅地实现 ElementUI Table 的单元格可编辑功能。这个功能允许用户在表格的特定单元格内进行编辑，提高交互性和用户体验。 首先，我们看到在 `APP.vue` 文件中，使用了 `<el-switch>`...
使用div+css布局过程中在什么时候使用table呢
12-13
4. 避免用 `table` 进行复杂的页面布局，因为这可能导致布局难以控制，尤其是在不同设备和屏幕尺寸上。 除此之外，`ul` 和 `ol` 用于列出无序和有序的列表，`pre` 和 `code` 用于代码展示和预格式化文本，而 `a` 和...
vue element中表格高度设置百分比不兼容低版本浏览器。
weixin_41994948的博客
12-22 1447
在用element中的表格时发现了一个问题，表格高度的设置，官方文档上给例子height的单位设置的是px。但是要让表格自适应，就得设置为相对的单位百分比，刚开始一切ok。但后面测试时候发现设置为百分比有兼容性问题谷歌、ie的低版本识别不了百分比为单位的表格高度。既然css不兼容，那就只能js强制操作一波了。 因为是在vue中就直接用ref获取需要的父级元素了，绑定ref，在方法中获取这个ref拿到父级元素的高度 <div class="resource-right fl" ref="resour
element table组件根据屏幕大小动态设置max-height属性设置表格最大高度，但设置百分比或者响应式不生效的问题
二三的博客
12-06 1万+
element的table表格组件有一个max-height属性，可以设置table的最大高度，但是当我设置这个属性的值为百分比或者响应式的时候，却没有生效，如下所示。 max-height:calc(100vh - 40px) //或者 max-height:calc(100% - 40px) 这是因为element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。 解决方法有以下几种： 首先列举出代码： 首先设置table组件的ref属性，以及设.
Vue2+Element-ui实现el-table表格自适应高度
最新发布
cnsv的博客
06-12 780
vue2+elementUI table表格自适应页面高度
Element技能点--el-table固定表头且高度占满
程序员大阳
01-18 2万+
el-table固定表头非常简单，只要给添加height属性即可。 <el-table height="250"></el-table> 如果想让表格占满当前高度，必要前提时让父元素的高度先撑满当前高度。 <div style="height:100%"> <el-table height="100%"></el-table> </div> 而有些情况下，设置height为100%只能保证固定表头，高度无法占满，此时可以尝试使用。
el-table组件的固定表头和高度自适应问题
Suk__的博客
04-09 4565
首先上问题图: 除了高度超出和没有内部滚动条之外,表头也没有固定直接滚动上去了,我想要的效果是表头固定只有数据滚动,table外面的layout盒子也不滚动,只是表格内容区滚动,并且表格高度刚好和分页条触底,整个表格都在首屏 目标效果图: 解决方法: 首先高度问题我们可以在el-table外面套一层盒子,高度用calc减去其它的高度给到这个盒子,然后el-table上加上一个props: height="100%" 即可 至于固定表头的做法就是写了height这个props就会自.
el-table高度自适应方案（纯CSS、简单、完美）
LETEfly的博客
12-07 3872
通过flex布局，原本预期是让分页组件始终固定在表格底部，但实际上，表格撑满导致分页组件被挤到下面看不见了。解决方案就是在原本flex布局的基础上让el-table的父容器的min-height=0。
在el-tabs中echarts图表宽高设置style=“width: 100%； height: 100%“不起效变成100px的问题
热门推荐
老男孩的博客
01-14 6万+
出现的问题 在开发过程中发现el-tabs在默认页echarts正常显示，其他页中echarts设置的宽高为100%不起效，最后都是100px 问题原因 echarts绘制图表计算宽度的时候，由于第二个及后面的tab的属性display: none; 所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度高度为100px。 解决方案 结合v-if，将echarts绘图封装成一个组件，然后在el-tab中
element-ui的table实现高度自适应
weixin_41721295的博客
04-07 1528
1.最外层div使用flex部署。2.第二层使用calc计算高度。3.最后设置表格的height="100%"
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
Vue.js 是一款流行的前端框架，ElementUI 是基于 Vue 的一套组件库，提供了丰富的 UI 组件。在处理大量数据展示时，为了避免一次性加载过多数据导致页面响应慢或用户体验不佳，我们可以采用滚动懒加载（Scroll Lazy ...
父元素设置max-height，子元素高度设置百分比，子元素继承父元素高度失败
06-26 1195
小程序里碰到的，最外层page高度 100%，里边第一层盒子高度为 max-height: 60%;第一层盒子里有 title，content，这个 content 高度要随着第一层盒子高度走，最高为第一层盒子的高度减去 title 的高度，如果高度超出第一层盒子高度了需要做滚动处理。利用 flex ，只需要加三行代码即可，甚至如果布局再简单一点，只需要加一行代码就可以。可以看到这个高度是没继承下来的，设置了百分比或者 calc 百分比计算也没用。
el-table设置高度自适应，动态设置height
zyynb的博客
02-23 1万+
vue+el-table设置高度自适应，动态设置height
vue+elementui中的el-table表格高度自适应设置
路飞船长的博客
10-08 8615
vue+elementui中的el-table表格高度自适应设置。
el-table高度自适应
梨子社区
06-20 518
el-table高度自适应
实现table表格100%填充
longtengg1的博客
04-21 1483
表格中有一列是结果列，需要根据测试结果显示不同的背景色，背景色要求100%填充整个格子 在这里插入一个template <el-table-column label="Result"> <template slot-scope="scope"> <div class="result" :class=" scope.row.result === ''
使用flex布局elementui表格在使用百分比被撑开
weixin_42663908的博客
04-29 1227
前言 当我们布局是使用的flex布局，且使用elementui的表格的高度和最大高度设置成百分比的时候，会发现浏览器会出现滚动条，但是我们的需求又不要让最外层盒子有滚动条，我们在查看elementui官方文档发现height和max-height是number或string。 二、使用步骤 1.父组件 代码如下（示例）： <template> <div class="tab-box"> <div class="top-box flex-box">
element-ui height:100%不生效解决方案
qq_52822043的博客
05-06 3508
在使用element-ui组件时，想要侧边栏的高度占满屏幕的左侧边栏，单纯在样式中设置了height:100%，然而并不生效。 .el-menu { height: 100%; border: none; h3 { color: #fff; text-align: center; line-height: 48px; } } 解决方案： 当想要元素铺满整个屏幕的时候，采用绝对定位或者固定定位 定位+width：100%
el-table 父元素是弹性盒子flex:1 父元素高度变化 eltable 出现滚动条
06-03
如果你想让 `el-table` 元素在其父元素是弹性盒子且高度变化时，出现滚动条，你可以为 `el-table` 设置 `height: 100%;` 和 `overflow-y: auto;` 属性。 具体的实现步骤如下： 1. 为 `el-table` 元素设置 `height: 100%;` 属性，让其高度与父元素相同。 2. 为 `el-table` 元素设置 `overflow-y: auto;` 属性，让其在内容超出父元素高度时出现纵向滚动条。 CSS代码示例： ```css .el-table { height: 100%; overflow-y: auto; } ``` 这样，当父元素高度发生变化时，`el-table` 元素就会出现纵向滚动条，保证表格内容能够完整显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值