解决表格刷新时抖动闪烁问题

最新推荐文章于 2026-07-09 15:49:26 发布

转载最新推荐文章于 2026-07-09 15:49:26 发布 · 1.8k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/qq_40836414/article/details/106423309

收录于

vue

前端

element

代码可运行

本文分享了如何解决Vue+Element UI在el-table分页加载时数据闪烁的问题，通过调整请求数据的时机和使用Vue生命周期钩子，确保数据同步，提升用户体验。

vue+element+el-table渲染数据闪烁

功能需求
由后端进行分页，前端使用element+el-table+el-pagination(分页)。使用axios请求后端数据，实现分页加载表格数据。
发现问题
点击不同页的过程中，el-table表格会闪烁暂无数据

然后才会加载数据。

没有使用假数据时那种流畅感，对于用户体验很差。
解决问题
遇到问题时，我想直接通过添加element的内置过度动画来解决问题，结果失败了，网上没有找到能够在table中添加transition 的帖子。
后面又尝试了各种方法并没有解决

这是我遇到问题时的代码

 //获取数据
            getList(page, size) {
                this.tableData = [];
                query_all_dynamic({
                    "pageNum": page,
                    "pageSize": size
                }).then(res => {
                    console.log(res);
                    this.total = res.data.data.total;
                this.tableData <span class="token operator">=</span> res.data.data.list<span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>,

这是我解决问题的代码

 //获取数据
            getList(page, size) { 
                query_all_dynamic({
                    "pageNum": page,
                    "pageSize": size
                }).then(res => {
                    console.log(res);
                    this.total = res.data.data.total;
					this.tableData = [];
                    this.tableData = res.data.data.list;
                });
            },

问题总结
出现暂无数据的问题是table渲染的data数组为空了，所以table会出现短暂的提示。而我造成这种问题的原因就是我在getList()方法刚进来就把data给清空了，然后再去后端请求内容。导致中间有一点点时间差。我把data清空放在请求成功之后的回调函数内，先让他清空，在把请求的数据赋值data，这样，table加载数据又变得顺滑无比了。
从遇到这个问题到解决问题。都觉得很有趣，记录一下，和我遇到同样问题的同学，希望能够帮助你解决问题。