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

相关推荐
Hilaku几秒前
不要在简历上写精通 Vue3?来自面试官的真实劝退
前端·javascript·vue.js
三小河7 分钟前
前端视角详解 Agent Skill
前端·javascript·后端
颜酱20 分钟前
二叉树遍历思维实战
javascript·后端·算法
鹏多多23 分钟前
移动端H5项目,还需要react-fastclick解决300ms点击延迟吗?
前端·javascript·react.js
不想秃头的程序员35 分钟前
Vue3 封装 Axios 实战:从基础到生产级,新手也能秒上手
前端·javascript·面试
奔跑的web.1 小时前
UniApp 路由导航守
前端·javascript·uni-app
竟未曾年少轻狂1 小时前
Vue3 生命周期钩子
前端·javascript·vue.js·前端框架·生命周期
TT哇1 小时前
【实习】数字营销系统 银行经理端(interact_bank)前端 Vue 移动端页面的 UI 重构与优化
java·前端·vue.js·ui
不一样的少年_1 小时前
Chrome 插件实战:如何实现“杀不死”的可靠数据上报?
前端·javascript·监控
偶像佳沛1 小时前
JS 对象
前端·javascript