ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue中有table切换时echart图不显示或者显示不合适的情况

2020-03-16 18:04:14  阅读:403  来源: 互联网

标签:容器 vue echart show 渲染 切换 table 第一页


问题说明:问题是这样,echart图在第一页,初次进入显示正常,但是切换到第二页,再点回第一页,图就不显示,或者是第一页的图出现在了其他页

解决:v-if换成v-show

详细说明:其实问题很简单,就是学习基础的时候经常见到的v-if和v-show的区别

v-if:元素不存在,用于不频繁的切换

v-show:元素存在,只是通过display属性将其隐藏,用于频繁的切换

可能也会有人说v-if切换的时候再让echart渲染一次就好了嘛!我就这样干了,监听了控制切换的变量然后重新渲染echart,这样为什么不可以呢?我想是因为echart在渲染之前首先要找到容器,获取容器的大小,通过ref获取到的本来就是虚拟的DOM,在v-if显示DOM的时候就找不到容器了。

经常使用v-if却忘了还有个v-show的存在,都是语法使用不规范惹的祸。

解释部分纯属个人理解,菜鸟一个理解不深,如不正确,还望批评指正!

标签:容器,vue,echart,show,渲染,切换,table,第一页
来源: https://blog.csdn.net/deciduous_leaves/article/details/104903941

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有