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

相关推荐
Ikalus198814 分钟前
三套 API 都告诉我成功了,浏览器一个字都没收到
javascript
Ikalus198827 分钟前
计数器停在 0,我差点把一篇空摘要发出去
javascript
付威20231 小时前
Rust 所有权:看你的答对几道题?
javascript
西红柿炖牛腩3541 小时前
Three.js 模型体积优化:Draco/Meshopt 压缩与 DRACOLoader 配置的 4 个步骤
javascript·3d·性能优化
薛一半1 小时前
React-Redux核心原理与容器组件实战
前端·javascript·react.js
web打印社区1 小时前
C-Lodop 提示未准备好或 WebSocket 没准备好:先让本机服务起来
javascript·网络·websocket·网络协议·pdf·html
言乐61 小时前
JavaScript概括前端原理
开发语言·前端·javascript·python·ecmascript
回眸&啤酒鸭2 小时前
DeepSeek V4.1 Flash 批量处理实战指南
服务器·前端·javascript
传人2 小时前
网页文字滚动效果如何做
前端·javascript·jquery
福兮说2 小时前
前后端算的 MD5、SHA-256 对不上?编码、换行、BOM、HMAC、JSON 顺序,八个原因逐个实测
前端·javascript·node.js·json·哈希算法