elementUI踩坑整理

前言

这篇文主要用来记录在使用elementUI中遇到的一些问题，以及通过我不屑的努力搜到的解决方式。会持续更新~

el-table与v-if公用导致数据错乱

问题描述：通过v-if控制来切换展示两个table组件，结果在切换的过程中，发现数据错乱。

现象如下图：

可以看到在切换的时候数据已经错乱了，比如test2的名称在切换的时候就不存在了，test1的样式也有问题。

查了下资料知道主要是因为elementUI的table是通过循环产生的，而Vue的更新机制会导致这里的DOM复用。还记得Vue diff的时候sameVnode方法会先判断两个节点的key是否相同，所以可以考虑给每个table都加key来告诉Vue这里不能进行复用。

解决方法：给table加key