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

相关推荐
weedsfly39 分钟前
迭代器、生成器与异步迭代——让数据“按需流动”的艺术
前端·javascript
假如让我当三天老蒯1 小时前
前端跨域解决方案(学习用)
前端·javascript·面试
铁皮饭盒3 小时前
Bun 哪比 Node.js 快?
javascript·后端
JieE21210 小时前
LeetCode 56. 合并区间|超清晰 JS 图解思路,面试高频区间题
javascript·算法·面试
candyTong13 小时前
RTK 技术原理:一次典型会话里,80% 上下文是怎么省下来的
javascript·后端·架构
_柳青杨17 小时前
深入理解 JavaScript 事件循环
前端·javascript
大家的林语冰1 天前
ES5 凉凉,Babel 8 正式发布,默认不再编译为 ES5 和 CJS......
前端·javascript·前端工程化
weedsfly1 天前
异步编程全景与事件循环——彻底搞懂 JS 执行机制
前端·javascript
用户1733598075371 天前
纯前端 PDF 数字签名实战:Vue 3 + pdf-lib 在浏览器里完成签名嵌入
前端·javascript
JieE2121 天前
LeetCode 226. 翻转二叉树|JS 递归超详细拆解,二叉树入门经典题
javascript·算法