Element-UI 表格无限抖动问题及解决

最新推荐文章于 2024-07-25 13:37:54 发布
最新推荐文章于 2024-07-25 13:37:54 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Vue 文章标签： ui elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaohuihui1400/article/details/135551381
版权
Vue 专栏收录该内容
36 篇文章 ¥19.90 ¥99.00
订阅专栏
本文介绍了Element-UI表格出现无限抖动的问题，并提供了两种解决方案：一是通过全局样式设置避免表格达到临界值，二是针对具体列设置min-width属性限制宽度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

参考文章

element-ui 表格无限抖动问题及解决

解决方法

项目全局为 .el-table 添加样式，不让它到临界值，这样可避免自动计算

  • css / scss
.el-table {
   
  width: 99.9% !important;
}

如果还是不能解决，在每个 el-table-column 中添加 width 属性，限制列的宽度

了解本专栏 订阅专栏 解锁全文
element-ui 表格边框的动态切换并防抖
此爱如少年
03-17 2419
文章目录需求实现过程解决抖动抖动原因解决抖动的实现过程再优化 需求 需求是这样的： 先前的需求，要求表格按UI设计图来，表格无边框。 新来的需求，要求能支持表格列宽的能够支持拖动。 按照官网，table组件的border属性，设置为true时可以显示边框。有了边框才能拖。 但是显示了边框，与之前的需求相悖。同时，既然显示边框有属性border支持，那么动态的更新border的值，应该就可以实现显示表格边框的动态切换。 基于此思路，采用比较折中的办法： 默认状态下不显示边框 当鼠标移动到表格头部时，显示
element-ui table表格组件设置展示列的显示与隐藏
m0_37714008的博客
01-14 2940
<template> <div> <div class="menu" @click="showPinel"> <i class="el-icon-more" /> <div v-show="menuVisible" class="menu_"> <el-checkbox-group v-model="colOptions"> <el-checkbox .
element-ui el-table 数据变化时表格出现抖动
m0_74244441的博客
07-19 2429
项目有个需求，有一个表格是通过改造el-table来适应需求，表格的head和body数据都是通过v-for渲染遍历生成的，通过多选框Checkbox来勾选表格头部需要展示的数据，进行切换到时候表格出现抖动不美观。如果切换表格的数据时表格是向下而上的抖动，可以使用element 表格中的dolayout函数解决：对 Table 进行重新布局，当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。有的使用随机数不出现抖动，有的使用正确的值不出现抖动。important;
element ui 表格在页面输入数据时左右抖动如何解决
Hhh84847886的博客
12-06 923
在beforeUpdate这个生命周期内等待所有数据更新完成后进行 表格的重排。首先表格左右抖动的原因时因为表格列进行了循环并且宽度没有固定，我们可以在。===========自用知识，排版略丑！
element-ui el-table表格出现抖动闪动问题的解决
热门推荐
我的博客
10-28 2万+
问题描述：勾选批量选择框、切换tab、输入查询条件时，table表格出现抖动，体验极差。
vue中element-ui的表格抖动
u012174809的专栏
03-11 2591
效果图我就不上传了，就是一直在抖(谷歌浏览器)。(本人电脑没出现这种问题，不同分辨率的电脑就偶尔会出现)，起先我并不打算处理这个BUG，因为它捉摸不透，我不知从何下手。后来，测试人员反应的越来越频繁，我起先的怀疑是宽度或高度达到了临界值，然后一直在自动计算。可是，我并不能十分确定，不知是我的CSS有问题，还是element插件出了问题，我并不能确定。直到我百度发现了同款问题，最终就确定了。 element-ui 表格无限抖动问题及解决 | = - = vue中element-ui的表格抖动 - 博客天天
element-ui el-table 表格疯狂抖动复现
10-13
element-ui el-table 表格疯狂抖动的原因可能是由于表格中的数据量过大，导致渲染时出现性能问题。可以尝试以下解决方案： 1. 使用 el-table 的 lazy 属性，将表格设置为懒加载模式，只有当滚动到可视区域时才会...
element-ui el-tabs 和 el-table混合使用的问题
Bynine9的博客
01-18 1万+
最近在使用vue的element-ui前端框架中的el-tabs和el-table混合使用，发现了很多小问题。 1、问题一：el-tabs会使el-tab-pane 下面的数据一次性加载出来，导致数据更新不及时 刚开始写的代码时这样的，发现页面加载的时候，会把两个tab的页面的请求一次性加载出来。如果tab页面过多，会导致请求过多，造成页面卡顿，最重要的是页面数据实时变化的话不能及时获取到最新数据。 <el-tabs v-model="activeName" @tab-click="handl
element-ui el-table 表格疯狂抖动
柠檬麻麻
11-03 5393
原因 审查元素el-table__body 的 width 不停被设置导致表格抖动 当未设定列表宽时，element有做自动检测适应。这造成了一种情况，即上下滚动条的出现时，触发宽度，使得上下滚动条消失，再次触发宽度变换，然后如此循环。 flexbox 子元素设置了 overflow: auto 导致的浏览器 bug 解决办法 检查布局中的：overflow: auto， 避免flexbox 子元素设置这个属性. 给.el-table__body添加 width: 100%!important; 属性
解决：element切换tab时table的抖动问题
Miss_Y0的博客
09-15 6270
使用element 表格中的`doLayout`方法，对 Table 进行重新布局
关于 2.15.14版本element-ui的el-tabs在切换时出现闪动的原因和解决方法
weixin_52169458的博客
09-02 4446
今天在做vue2项目练习的时候发现了这个问题，点击切换tab栏，内容出现闪动的效果，观感很差，研究一番之后，发现是因为用了el-table标签导致的，而且这个问题并没有出现在之前版本的element-ui中，究竟是什么原理本人小白不懂。。。
element-ui动态设置tabel列时,无效果,表头抖动,表格错乱,值不能正常展示等问题
最新发布
DecorateCC的博客
07-25 728
踩坑日记：最近用element-ui做一个动态列（频繁隐藏显示列）的表格踩坑记录下：1、在el-table-column上使用v-show绑定是无效果2、el-table-column几次切换显示/隐藏后，发现表格的排版完全乱了,或者值不能正常展示3、表格头抖动。
element-ui 中 el-table 使用 v-if 做动态列效果的时候导致的顺序错乱和输入框导致table抖动问题
qq_43199783的博客
09-05 807
element-ui 中 el-table 做动态列效果的时候导致的顺序错乱和输入框导致table抖动问题
elementui el-table表格出现抖动闪动
为啥不能换名字的博客
06-26 1万+
原因 1.是页面出现重绘 2.正好卡在要出滚动条的那个点 解决方法 .el-table{ width:99.9%!important; }
el-table闪动问题
ethan的博客
10-24 3994
el-table组件，在动态改变table数据，比如新增、删除、重新加载新的数据时，el-table重新渲染新的数据时会有闪动的现象。
element-ui table跟随屏幕缩放，有一定比例出现闪动
u013798317的博客
03-24 2741
原因：初步怀疑，数据渲染后，浏览器缩小到一定比例后，滚动条刚好卡在出现与否的边缘，导致table疑似闪现 方法一： .el-table__footer-wrapper, .el-table__header-wrapper{ overflow: auto; 方法二： /* 解决饿了么ui 滚动闪烁BOG */ .el-table__footer-wrapper, .el-table__head...
element 表格 动态创建时 表头错乱 表格抖动
Yangpengxunb的博客
02-03 1255
v-show起作用的本质是利用display:none控制隐藏，el-table-column的td是利用了display: table-cell 控制显示，而display：table-cell的优先级又高于display：none，所以v-show失效了。无论是显示列还是隐藏列，vue 都需要重新计算单元格的高度和宽度，然后再重新渲染到页面上。监视属性发生改变或者数据加载完，触发beforeUpdate生命周期函数，使得列的key发生改变（因为全都是随机数，全部发生改变），key发生改变表格重。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗情深

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值