element-ui中的el-table-column使用v-if导致列位置与数据错乱

element-ui中的el-table-column使用v-if导致列位置与数据错乱,第1张

根据需求,当某一项列数据时或者某属性时才显示此列,使用v-if进行显示隐藏后,发现会有随机列位置错乱与数据错乱现象。

 这是因为在v-for或者v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的,于是需要添加key来做区分! 表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,这就是问题所在,所以,通过key去标识一下当前行是唯一的,不许复用,就行了

给标签el-table-column添加key

1,每次切换页面都要加载全部的组件

可以用v-if进行处理

2,每次刷新页面默认跳转到第一个el-tab-pane  ,我们可以在tabs的@tab-click方法中用本地存储的方式保存name的值 页面加载时把值再赋值给v-model绑定的数据。

这里需要注意的是在获取sessionStorage中的值时一定要先进行判断session中有没有值 否则在第一次加载页面时是渲染不出来el-tab-pane中的组件的


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/7925865.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存