三次踩坑,皆因:key
el-table上边的:key属性,从我最开始使用并没有给予他较多的关注
,后来table用多了,频频出现数据更新但是视图不显的情况,才慢慢发现他的用途
主要为多层数据没有即时更新做辅助
看过一篇文章有具体的用法,在这里放上链接this.tablekey != this.table
vue 解决el-table 中 el-input-number 渲染且table闪烁的问题 - 大妖精的文章 - 知乎
https://zhuanlan.zhihu.com/p/385281157
我自己的踩坑历程就是,以为用了v-if和v-else,两个table绑一个tablekey不会有影响,但是,bug出现了,当时代码的表格数据从后台拿到后做了多层处理后才在页面上渲染的,出现部分列数据不显示,但是又能正常打印拿到数据的情况。后改了:key显示正常
后面经小可爱指导,给table加了一个row-key的属性,数据正常渲染
又找了下源码,找到了row-key属性,但是未找到key,小可爱说:官方文档未暴露出来的属性,最好不要用,要不后边代码出了问题,找不到问题出在哪里,你说说,我咋就想不到呢,烦

好,写到这里我发现我又错了,:key不是element的,而是vue操作DOM算法,比对新旧DOM的

预期:number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐