Vue中el-table条件渲染防止样式乱掉

javascript 复制代码
<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变化的时候内容会出现错乱。

相关推荐
johnjincaaaa1 小时前
猿人学第 18 题「jsvmp 洞察先机」逆向通关实录
javascript·后端
FungLeo4 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
总要学点什么4 小时前
第108篇:三维特效-图片轨迹线效果——把贴图滚成一串箭头,想用它的本色反而整条消失
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
ruanno_top7 小时前
选中一项后,焦点掉回了页面顶部:三个弹层的焦点还原
vue.js
小厨勺子8 小时前
我用AIUI给Rokid眼镜做了个随身换算智能体
javascript
夕水9 小时前
我用trae重构了ew-color-picker,一个插件化架构的现代颜色选择器
前端·javascript·开源
tryCbest9 小时前
Vue3——第 17 篇:模板引用(ref)与组件实例——操作 DOM 的正确姿势
vue.js·前端搭建
头发还在的女程序员10 小时前
Java在线租房系统源码解析:Spring Boot+Vue 3+UniApp房源管理与预约看房方案
java·vue.js·spring boot·租房小程序·租房系统·租房软件
FYKJ_201010 小时前
springboot同人周边订单管理系统48955-计算机毕业设计、课程设计
java·javascript·vue.js·spring boot·django·php·课程设计
总要学点什么11 小时前
第106篇:三维特效-流动线效果——让一颗光点沿整条线一路滚到头
开发语言·javascript·ecmascript·gis·webgl·材质·cesium