element ui 表格在页面输入数据时左右抖动如何解决

有三个H

已于 2024-01-15 10:06:54 修改

阅读量920

点赞数 7

文章标签： ui vue.js 前端

于 2023-12-06 10:53:49 首次发布

本文链接：https://blog.youkuaiyun.com/Hhh84847886/article/details/134826159

版权

问题原因：表格列进行了循环(即表格表头循环)并且每列宽度未固定或者频繁变动表格列

解决方案：

VUE 生命周期中的

beforeUpdate() {

this.$nextTick(() => {

this.$refs.table.doLayout()

})

},
在beforeUpdate这个生命周期内等待所有数据更新完成后进行表格的重排

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

有三个H

关注关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

一碗清深的博客

01-22

1088

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

element-ui 表格边框的动态切换并防抖

此爱如少年

03-17

2403

文章目录需求实现过程解决抖动抖动原因解决抖动的实现过程再优化需求需求是这样的：先前的需求，要求表格按UI设计图来，表格无边框。新来的需求，要求能支持表格列宽的能够支持拖动。按照官网，table组件的border属性，设置为true时可以显示边框。有了边框才能拖。但是显示了边框，与之前的需求相悖。同时，既然显示边框有属性border支持，那么动态的更新border的值，应该就可以实现显示表格边框的动态切换。基于此思路，采用比较折中的办法：默认状态下不显示边框当鼠标移动到表格头部时，显示

1 条评论您还未登录，请先登录后发表或查看评论

element-ui el-table 数据变化时表格出现抖动

m0_74244441的博客

07-19

2368

项目有个需求，有一个表格是通过改造el-table来适应需求，表格的head和body数据都是通过v-for渲染遍历生成的，通过多选框Checkbox来勾选表格头部需要展示的数据，进行切换到时候表格出现抖动不美观。如果切换表格的数据时表格是向下而上的抖动，可以使用element 表格中的dolayout函数解决：对 Table 进行重新布局，当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。有的使用随机数不出现抖动，有的使用正确的值不出现抖动。important;

vue中element-ui的表格抖动

u012174809的专栏

03-11

2569

效果图我就不上传了，就是一直在抖(谷歌浏览器)。(本人电脑没出现这种问题，不同分辨率的电脑就偶尔会出现)，起先我并不打算处理这个BUG，因为它捉摸不透，我不知从何下手。后来，测试人员反应的越来越频繁，我起先的怀疑是宽度或高度达到了临界值，然后一直在自动计算。可是，我并不能十分确定，不知是我的CSS有问题，还是element插件出了问题，我并不能确定。直到我百度发现了同款问题，最终就确定了。 element-ui 表格无限抖动问题及解决 | = - = vue中element-ui的表格抖动 - 博客天天

element-ui el-table表格出现抖动闪动问题的解决

热门推荐

我的博客

10-28

2万+

问题描述：勾选批量选择框、切换tab、输入查询条件时，table表格出现抖动，体验极差。

element ui表格抖动

12-01

element ui表格抖动的原因是因为无论是显示列还是隐藏列，vue都需要重新计算单元格的高度和宽度，然后再重新渲染到页面上。因为这个过程被直接反馈到了页面上，所以导致了table发生闪烁。解决方法是使用element中的...

element UI中flex布局下el-table宽度自适应在IE下出现一直加载宽度的bug解决

u013994400的博客

03-01

821

element-ui 表格列会动态持续增加

element-ui table表格组件设置展示列的显示与隐藏

m0_37714008的博客

01-14

2929

<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 .

VUE+Element UI项目中使用el-table出现的内容块左右抖动问题解决方法

qq_44833124的博客

02-24

4212

之前有试过绑定的key为随机生成数，但是抖动问题在我这里并没有得到解决，随后将key置为固定的数值就彻底解决了这个抖动的问题，希望可以帮助到大家。计算的列宽，并且有 v-if 或 v-show 来控制表格某一列的展示与隐藏，所以切换tab或者触发点击事件时使表格会被重新加载计算，从而出现抖动的现象。页面渲染出表格以及表格中的所有内容，当触发表格中的自定义点击事件或者切换tab页时，表格里面的单元格和内容行就会发生左右或者上下抖动。由于表格中的 el-table 没有采用固定列宽，而是采用。

element-ui动态设置tabel列时,无效果,表头抖动,表格错乱,值不能正常展示等问题

最新发布

DecorateCC的博客

07-25

690

踩坑日记：最近用element-ui做一个动态列（频繁隐藏显示列）的表格踩坑记录下：1、在el-table-column上使用v-show绑定是无效果2、el-table-column几次切换显示/隐藏后，发现表格的排版完全乱了,或者值不能正常展示3、表格头抖动。

解决：element切换tab时table的抖动问题

Miss_Y0的博客

09-15

6241

使用element 表格中的`doLayout`方法，对 Table 进行重新布局

element-ui 中 el-table 使用 v-if 做动态列效果的时候导致的顺序错乱和输入框导致table抖动问题

qq_43199783的博客

09-05

795

element-ui 中 el-table 做动态列效果的时候导致的顺序错乱和输入框导致table抖动问题

elementui动态table表格抖动，表格样式错乱

Sunny_lxm的博客

06-08

4434

elementui动态table表格抖动，表格样式错乱

element-ui el-table 表格疯狂抖动

柠檬麻麻

11-03

5362

原因审查元素el-table__body 的 width 不停被设置导致表格抖动当未设定列表宽时，element有做自动检测适应。这造成了一种情况，即上下滚动条的出现时，触发宽度，使得上下滚动条消失，再次触发宽度变换，然后如此循环。 flexbox 子元素设置了 overflow: auto 导致的浏览器 bug 解决办法检查布局中的：overflow: auto，避免flexbox 子元素设置这个属性. 给.el-table__body添加 width: 100%!important; 属性

element 表格动态创建时表头错乱表格抖动

Yangpengxunb的博客

02-03

1249

v-show起作用的本质是利用display:none控制隐藏，el-table-column的td是利用了display: table-cell 控制显示，而display：table-cell的优先级又高于display：none，所以v-show失效了。无论是显示列还是隐藏列，vue 都需要重新计算单元格的高度和宽度，然后再重新渲染到页面上。监视属性发生改变或者数据加载完，触发beforeUpdate生命周期函数，使得列的key发生改变（因为全都是随机数，全部发生改变），key发生改变表格重。

解决element表格切换时出现闪动

xwyjw的博客

06-09

2180

解决element表格切换时表格出现抖动的问题问题主要出现在我们表格的key值地方表格切换时key值不变，导致出现表格出现抖动解决办法是在我们对表格进行切换时给他的key值进行重新赋值此时问题就解决了原文链接是原作者 ...

el-table表头抖动的问题

huiaixing的博客

09-15

3195

解决element UI中el-table表头滑动延迟、抖动的问题。