解决多个el-table隐藏显示内容不变化

项目中遇到一个比较有意思的问题,因为之前没用过element ui所有捣鼓了好一阵子才搞明白,如有更好的解决方法欢迎大佬留言

问题

项目要求实现点击对账单显示对账单表格,再点击切换回来原来的表格.

如图所示,我对账单表格的单元格是有tag标签,这个时候应该点击订单列表就切换回第一张图的样子.

有意思的事情发生了,第一个表格中的单元格和第二个表格的单元格合并(替换?)了,整个页面乱七八糟

两个表格代码如图

解决

在看element ui没找到解决方法后在vue官方文档中找到了key的说明

可以看到这样一句话 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。 也就是说在没有key的情况下vue会尝试去复用同类型的元素,所有单元格中的el-tag和其他元素被保留了下来,所以我们只需要添加上key就可以解决问题.