el-tab切换tab页,echarts只有第一个显示正常,其余空白

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了el-tab切换tab页,echarts只有第一个显示正常,其余空白相关的知识,希望对你有一定的参考价值。

参考技术A 设置一下echarts的高度和宽度就好了耶
参考链接 https://www.cnblogs.com/Ao-min/p/13157998.html

切换标签

初始化echrats时指定宽度

小谢第20问:vue中切换tab页清除定时器

场景是这样的:因为两个tab页面的内容较多,所以将每一个tab页分离成子组件,然后在各自的页面渲染视图,起初我认为每一个tab页相当于单页面,所以用了vue钩子函数destory的清除定时器,发现不管用

解决办法:将清除定时器的方法写在tab的点击事件中

具体方案:1、ref绑定子组件,然后将清除定时器的方法写在子组件的method中,

    clearInterval(){
      clearInterval(this.updata_timer); 
    }
2、在父组件中,用this.$ref获取子组件的方法-----搞定!

以上是关于el-tab切换tab页,echarts只有第一个显示正常,其余空白的主要内容,如果未能解决你的问题,请参考以下文章

echarts的自适应问题(窗口自适应,侧边栏自适应,el-tab中的自适应)

在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结

element-ui el-tabs 如何调用组件的接口

关于element的标签页el-tabs和el-tab-pane不在一起写便无法正确渲染的记录

处理点击tab标签时Echarts图片显示不全的问题

VUE仿造element-ui el-tabs标签页选项卡样式