elementUI 的el-table中切换tbs出现设置flexd栏高度塌陷

最新推荐文章于 2024-04-28 15:34:18 发布
最新推荐文章于 2024-04-28 15:34:18 发布
阅读量323 收藏
点赞数
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42400319/article/details/80595058
版权

原因：

当两个页面切换（display：none到block，而出现这个问题的表格中是有列合并的操作）会导致页面回流，由于elementUI的表格高度是计算得出，发现这个表格的高度以及宽度与之前正常渲染的都发生了改变，这样就导致了固定列（el-table__fixed-body-wrapper）位置直接计算不准确导致塌陷。

解决方法：

updated钩子中使用el-talbe自带的doLayout方法。调用此方法后table组件会重排。

updated(){

this.$refs.mainTable.doLayout()

},

 

weixin_42400319
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
12-29
ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el empty-text=正在加载中... data=contentList ...el-table-c
el-table切换后表格高度改变
我的代码没有bug的博客
09-22 1826
产生原因：由于element-ui自身的bug 解决方法： 先固定表头高度，然后body_wrapper使用calc来减去表头高度 /deep/ .el-table__header-wrapper { height: 58px; } /deep/ .el-table__body-wrapper { height: calc(100% - 58px) !important; } ...
element-ui中的el-tab和el-table样式冲突导致table高度缩小
zby878的博客
01-03 1283
element-ui中的el-tab和el-table样式冲突导致table高度缩小
el-table内部操作栏高度塌陷问题
m0_46208009的博客
03-05 900
element-ui 中的el-table内部操作栏高度塌陷问题 bug出现的时机 1. 初次进入页面没有问题 2. 切换导航再切换回来的时候 *el-table内部操作栏高度塌陷* 3. 导航栏采用keep-alive 尝试更改 1. this.$forceUpdate() 2. window.scrollY 3. 调试 css 失败 最后解决 添加 width 宽度解决 以数据的形式插入width宽度 ...
element table 表头使用v-if，tab切换和分页切换时出现闪动
weixin_42340514的博客
08-19 1508
element table 控制表头显示隐藏只能使用v-if，v-show没效果 使用v-if的时候切换时表头数据可能会下掉，出现闪动，分页切换的时候也会出现这个问题 beforeUpdate() { this.$nextTick(() => { //在数据加载完，重新渲染表格 this.$refs["table"].doLayout(); }); }, 表格内容错乱问题 <el-table-column :key="Math.r.
element el-table固定列凹陷问题
SunshineGGB的博客
11-15 833
列表显示字段过多，最后一栏操作列加固定显示，横向添加滚动条，在自测浏览器开发者模式时，发现固定列的最后一行出现了凹陷现象，网上查阅资料大多为在更新生命周期或者页面更新操作时重载页面，这些方法对本文出现的现象没有实际效果，最后的解决办法为直接设置横向滚动条，将列表的高度撑高以此解决问题。图1 F12打开浏览器再关掉最后一行出现按钮凹陷现象。
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI为el-table元素提供了直接设置高度（height）属性的方法，从而固定表头并实现内容的滚动。在本文中，将会详细探讨如何实现这一功能，并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI...
解决elementui动态切换table列内容，出现数据闪动情况
Songywaa的博客
12-21 8991
功能描述： 动态显示表格的某些列的内容 二级表头也是动态显示 解决问题: 先看下我录制的gif图，会有数据闪动的情况 解决方法： 首先，不要使用v-show，要使用v-if。 其次，表格加载属于懒加载，所以每次切换内容需要让表格重新加载一次 实现方法：给表格加索引，每次切换改变索引值 直接上代码： // 控制表格切换 <el-radio-group size="mini" v-mode...
vue学习之elementUI表格表头切换时抖动问题--解决
King的博客
01-15 1588
问题描述，在日常开发时，我们会碰到切换表头，就是让某些表头显示和隐藏。这个时候切换时，表头会出现抖动的现象。 解决： beforeUpdate(){ this.$nextTick(() => { //在数据加载完，重新渲染表格 this.$refs.table.doLayout(); }) } 看到网上一些人说使用在el-table中使用key属性，但是那个并没有用 ...
el-table固定列显示问题-固定列高度与表格高度不一致
梁白开的博客
12-12 1191
设置固定列，即表示在原表格的基础上渲染出新的fixedtable来展示固定列，这两个table一定程度上是重合的，fixedtable在原table上，fixedtable 通过 只渲染 我们选为 固定列的 列。原table与fixedtable高度问题，由下图可知原table高度为630px，两个固定列fixedtable高度为612px，从而导致了高度不一致问题。在使用el-table过程中，设置了左右两个固定列，由于未指定表格高度，故而导致以下问题。固定列表尾高度与表格高度不一致问题。
切换页面表格数据闪烁问题
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-26 706
问题描述：我使用的是element标签页的切换页面组件，并且数据是使用的同一个接口做的切换页面筛选出新的数据，在切换到下一个页面的时候会闪烁一下之前的数据，我知道是因为请求接口的延迟所以才看的到之前的数据。解决办法：在切换页面的时候，请求到数据之前把数据清空，就看不到上一个页面的数据了，就感觉不到闪烁了。
element table 加载时宽度闪烁问题
一只小鹰
02-15 2031
每次加载 element 的 table，当在 tabs 标签中切换时，table的宽度都会从一个较小值展开，看着就是闪烁，体验非常不好。
【Vue+ElementUI】el-table动态高度设置及表格内容错乱对不齐
最新发布
sunshineTing2的博客
04-28 3106
el-table动态高度设置及表格内容错乱对不齐
解决el-table设置固定高度后，展示不同列时表格高度变小bug
DZQ1223的博客
04-03 1088
究其原因可知是el-table列动态发生变化后，el-table__body-wrapper的高度变小了。在更新表格数据后对el-table进行重载。
element el-table组件的 el-table-column加了fixed属性列固定后样式高度错乱问题
禅思院
09-07 1万+
问题1 element-ui el-table组件的 el-table-column 加了fixed属性列固定后样式高度错乱 原因 el-table-column 列加了fixed="right"操作后，从源码上来看，加入fixed之后这个列的高度是动态计算的，页面加了缓存，再次切换回来就会导致高度没有计算padding值所有会出现高度错乱的问题。 方案 覆盖el-table__fixed-right 的css 样式 .主class .el-table__fixed-right { heigh
element问题总结之el-table使用fixed中 header换行后固定行错位问题/固定列下陷问题
m0_50207524的博客
04-08 444
在使用el-table的fixed中，发现如果header拖拽文本折行的时候会出现下陷。
解决elemen-ui Table表格动态计算高度的bug----el-table__body-wrapper
热门推荐
能先森的博客
12-31 1万+
相信大家在使用element-ui–Table表格组件时，都遇到过需要监听屏幕窗口的大小，动态计算table的height，达到适配屏幕尺寸的友好界面项目。网上有各种各样的办法，同样可以实现动态计算table表格的高度；但是大家有没有发现切换路由到其他界面再返回到当前界面，table的表格高度少了24px（我自己测试是24px,可能会更高）。其实，这是element-ui内部的一个bug；接下来给...
elementUI el-table中el-table-column 和el-table-column同时v-for结合使用\
10-13
当在elementUI的el-table中同时使用el-table-column和el-table-column组件时，可以通过v-for指令来动态生成表格列。具体实现方式是在el-table-column组件上使用v-for指令，同时在v-for指令中使用el-table-column组件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值