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,来表示俩个表格是完全独立的,不要复用,重新渲染

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。