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

相关推荐
cn_mengbei3 小时前
用React Native开发OpenHarmony应用:Reanimated共享元素过渡
javascript·react native·react.js
kyriewen3 小时前
前端测试:别为了100%覆盖率而写测试,那是自欺欺人
前端·javascript·单元测试
Data_Journal3 小时前
如何使用cURL更改User Agent
大数据·服务器·前端·javascript·数据库
掌心向暖RPA自动化3 小时前
如何获取网页某个元素在屏幕可见部分的中心坐标影刀RPA懒加载坐标定位技巧
java·javascript·自动化·rpa·影刀rpa
竹林8184 小时前
wagmi v2 多链钱包切换:一个 Uniswap 仿盘项目让我踩了三天坑
前端·javascript
你也向往长安城吗4 小时前
最快的 JavaScript navmesh pathfinding3d 算法。
javascript
滕青山4 小时前
在线PDF拆分工具核心JS实现
前端·javascript·vue.js
兔子零10246 小时前
Ofox AI值得用吗?
前端·javascript·后端
We་ct6 小时前
React 性能优化精讲
前端·javascript·react.js·性能优化·前端框架·html·浏览器
渣渣盟7 小时前
Spark 性能调优实战:从开发到生产落地
javascript·ajax·spark