tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高。在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个tab的宽高都是0。

问题的具体根源,暂不清楚。在调试过程中发现,如果先渲染“订阅量统计”的tab,图表可以正常显示。但是不是一开始渲染,切换的时候查看会发现宽高为0。自己分析,应该是页面初始化的时候,渲染了第一个tab,第二个tab是渲染了,但是因为是隐藏的display=none,因此宽高都是0。导致子组件无论如何打印,其父级节点的宽高都是0。

解决思路是:希望一开始只渲染第一个展示的tab,其他的tab等点击的时候再进行渲染查询。因此代码解决方案如下。每一个子组件添加v-if属性。

tab下图表展示宽高为0的问题的更多相关文章

  1. new Image 读取宽高为0——onload

    获取图片一张图片的大小 let img = new Image() img.src = imgUrl if ( img.width != 375 || img.height != 200 ) { me ...

  2. Adatper中获取宽高为0的问题

    但是我们想在getView()中获取ImageView的宽和高存在问题,在getView()里面刚开始显示item的时候利用ImageView.getWidth() 获取的都是0,为什么刚开始获取不到 ...

  3. android onCreate中获取view宽高为0的解决方法

    view.post(runnable) 通过post可以将一个runnable投递到消息队列的尾部,然后等待UI线程Looper调用此runnable的时候,view也已经初始化好了. view.po ...

  4. jquery 获取图片宽高为0的问题

    原理:页面加载完了,图片不一定加载完了. $(function(){ $("img").on("load",function(){ //核心 var w = $ ...

  5. 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题;(display、opacity、宽高0的使用场景)

    display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0  隐藏,但是其依旧占用位置: height.width:0 和displa ...

  6. 【Flutter学习】页面布局之宽高尺寸处理

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  7. 【图像处理】Golang 获取JPG图像的宽高

    一.背景 有些业务需要判断图片的宽高,来做一些图片相关缩放,旋转等基础操作. 但是图片缩放,旋转,拼接等操作需要将图片从 JPG 格式转成 RGBA 格式操作,操作完毕后,再转回 JPG 图片. 那如 ...

  8. CCLabel在最大宽度已知的情况下如何获取实际宽高

    当前环境在cocos2.2.6, 在UI摆图中,会遇到一种情况就是 设定了label的最大宽度MAX_WIDTH,但label的内容是动态的,如何在label输入了文字之后获取label的真实宽高? ...

  9. vue 动态获取div宽高有时候为0的情况

    项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => {    }) ...

随机推荐

  1. Linux命令学习之两个小技巧(1)

    本篇主要想讲两个小技巧.本来技巧之类的话应该放在学完整个东西之后或者在学习中遇到时再说的,但是这两个技巧其实很简单,很多人只要我一提就知道了.与其说是技巧,不如说是注意事项. 自动补全 在Linux终 ...

  2. MY SQL数据库密码最简单的一个方法()

    https://zhidao.baidu.com/question/564368111.html 非常简单的一个修改方法!!!!!!!!!!!!!!!!!!!!! 最简单的方法就是借助第三方工具Nav ...

  3. P2294 [HNOI2005]狡猾的商人(差分约束)

    P2294 [HNOI2005]狡猾的商人 对于每个$(x,y,w)$,连边$(x-1,y,w),(y,x-1,-w)$,表示前$y$个月的收益比前$x-1$个月的收益大$w$ 这样题目就转化为询问图 ...

  4. wordpress数据库结构以及数据表之间的关系

    默认WordPress一共有以下11个表.这里加上了默认的表前缀 wp_ . wp_commentmeta:存储评论的元数据 wp_comments:存储评论 wp_links:存储友情链接(Blog ...

  5. ECMAScript 6 学习笔记(一)

    ECMAScript 6简介 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写 ...

  6. 第7天:Django模板使用与表单

    模板的配置 作为web框架,Django提供了模板,用于编写html代码,模板的设计实现了业务逻辑view与现实内容template的解耦.模板包含两部分: 静态部分: 包含html.css.js 动 ...

  7. js中的数组去掉空值

    //result 是有空值的数组//r是处理好的数组var r = result.filter(function (s) { return s && s.trim();});

  8. Win10 + Ubuntu 安装教程(痛苦踩坑)

    今天搞了一天,痛苦万分,本文的教程基本适用大部分情况,现在记录下需要主义的几点: 一.制作ubuntu usb安装盘的时候,格式要选saw的,千万不要用usb-HDD+的 二.安装完后使用EasyBC ...

  9. 一、.net Core bundleconfig.json

    一.bundleconfig.json [ { "outputFileName": "wwwroot/css/site.min.css", "inpu ...

  10. Thinking in Annotation

    Thinking in Java这本书很久前就购买了,打算有时间看一下,因为自己的时间被自己安排的紧张,也没时间看书.黄师傅上次课程讲到了注解的使用和反射的使用,今天打算学习一下注解.该文章参考Thi ...