vue项目-遇到bug--表格在使用v-if切换的时候数据渲染有问题

问题说明：通过v-if来判断俩个表格数据的显示

image.png

表格显示

image.png

image.png

解决方法：
参考文档----- https://www.cnblogs.com/duoge/p/12659278.html

找原因：

1.可能是template中的slot-scope="scope"t-scope="scope"的影响
---将表格中的template全部去掉

image.png

表格恢复正常--

image.png

image.png

解决方法：

1.使用v-show来替代v-if

image.png

问题的情况得到解决：

image.png

image.png

2.在没有看到这种解决办法时----将所有的列都添加上template，问题也会被解决

image.png

image.png

image.png

3.在每一个表格的el-table标签中添加一个key标识，问题也可以被解决，

image.png

原因解释：

1.vue会尽可能高效的渲染元素，通常会复用已有的元素，不会从头开始渲染-----vue提供了一个key，来表示俩个表格是完全独立的，不要复用，重新渲染