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

相关推荐
等什么君!23 分钟前
学习vue3:监听器
前端·vue.js·学习
天天打码1 小时前
Nuxt.js一个基于 Vue.js 的通用应用框架
前端·javascript·vue.js
Dnn011 小时前
前端读取本地项目中 public/a.xlsx 文件中的数据 vue3
前端·javascript·vue.js·读取xlsx数据
一块小砖头儿2 小时前
HTML向四周扩散背景
前端·javascript·html
CodeClimb2 小时前
【华为OD-B卷-打印文件 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
陳長生.2 小时前
JAVA EE(进阶)_HTML
javascript·css·java-ee·html
眼镜chen2 小时前
luckysheet的使用——17.将表格作为pdf下载到本地
前端·javascript·vue.js·chrome·pdf
_龙小鱼_2 小时前
Vue2到Vue3迁移问题解析
前端·javascript·vue.js
招风的黑耳3 小时前
Axure跨页面交互:利用IFrame和JS实现父子页面菜单联动
javascript·交互·axure
二川bro3 小时前
深度解析Vue项目Webpack打包分包策略 从基础配置到高级优化,全面掌握性能优化核心技巧
vue.js·webpack·性能优化