Vue中el-table条件渲染防止样式乱掉(解决方法)
更新时间：2023年11月10日 15:12:26 作者：new code Boy
这篇文章主要介绍了Vue中el-table条件渲染防止样式乱掉问题,通过使用:key="Math.random()" 可解决样式错乱问题,此key属性是vue自带的特殊属性,主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes,依次来提升页面渲染性能,感兴趣的朋友一起看看吧
Vue中el-table条件渲染防止样式乱掉
<el-table ref="table" :header-cell-style="{background: 'rgba(222, 222, 222, 1)', color: '#909399'}" v-loading="" stripe border :data="" element-loading-text="加载中..." :row-style="{height: '40px'}" :cell-style="{padding: '0px}">
<el-table-column show-overflow-tooltip prop="" align="center" lable="" min-width="100" v-
if="" :key="Math.random()">
</el-table-column>
</el-table>:key="Math.random()" 可解决样式错乱问题
此key属性是vue自带的特殊属性，主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，依次来提升页面渲染性能。
如果不更新此key的话,显示/隐藏列时会导致部分DOM不会重新渲染,因此table变化的时候内容会出现错乱。
el-table列表渲染时闪烁或者布局混乱的问题
项目场景：
当列表数据发生变化时，例如刷新列表或者更改查询条件获取列表数据重新渲染列表。
问题描述
列表正常这样子显示
当列表数据发生变化时，下面的这个状态会一闪而过，然后恢复正常。
原因分析：
列表数据变化时，vue会重新计算列表高度宽度重新渲染，这个过程会导致列表闪烁。
解决方案：
element-ui提供了一个表格方法doLayout，可以使用该方法避免表格闪烁的情况。
①
beforeUpdate() {
this.$nextTick(() => {
this.$refs['table'].doLayout()
})
}②
async fn(){
const res = await getApi(); //在使用接口调取数据后
this.tableData = res.data.rows; //将数据赋值给列表data
this.$nextTick(() => { //调用doLayout重新渲染表格
this.$refs['table'].doLayout();
})
}到此这篇关于Vue中el-table条件渲染防止样式乱掉的文章就介绍到这了,更多相关vue el-table条件渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue-cli工程webpack的基本用法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-09-09
Vue.set方法用于向响应式对象中添加新的属性,并确保这个新属性是响应式的,这篇文章主要介绍了Vue监视数据的原理和set()使用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-09-09
这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
看过很多人讲vue的生命周期，但总是被绕的云里雾里，尤其是自学的同学，可能js的基础也不是太牢固，听起来更是吃力，那我就已个人之浅见，以大白话的方式给大家梳理一下，如有不准确的地方，欢迎指正！2020-12-12
这篇文章主要为大家详细介绍了vue使用echarts图表的详细方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环,通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策,在Vue中进行数据可视化大屏展示也变得越来越流行,本文将介绍如何在Vue中快速实现数据可视化大屏展示2023-10-10
在Vue3中,我们经常会遇到需要处理列表渲染的情况,Vue3引入了一种新的语法,即#default=“scope”,本文就来介绍一下Vue3中#default=“scope”的使用,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了Vue 实现可视化拖拽页面编辑器的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-02-02
这篇文章主要给大家介绍了关于vue3.0项目快速搭建的相关资料,本文通过图文以及实例代码介绍的非常详细,对大家学习或者使用vue3.0具有一定的参考学习价值,需要的朋友可以参考下2021-12-12
本文给大家介绍vue多层弹框时存在遮挡问题，解决思路首先想到的是找到对应的遮挡层的css标签，然后修改z-index值，但是本思路只能解决首次问题，再次打开还会存在相同的问题，故该思路错误，下面给大家带来一种正确的思路，一起看看吧2022-03-03
最新评论