Vue解决echart在element的tab切换时显示不正确（现在已经不能用lazy了）

最新推荐文章于 2024-07-04 11:43:19 发布

前端李小白

最新推荐文章于 2024-07-04 11:43:19 发布

阅读量4.8k

点赞数 4

分类专栏： vue echart 文章标签： vue tab标签页

本文链接：https://blog.csdn.net/qq_42268364/article/details/100105338

版权

在Vue中，当echart图表置于element的tab控件中，初次切换时可能会出现宽度不正确的问题。原因是隐藏的图表在加载时无法获取到正确的div尺寸。由于element已移除lazy属性，目前的解决方案是利用v-if指令，切换到对应tab时才初始化echart。需将echart图表封装为组件，确保在显示时正确初始化，避免页面报错。实测此方法有效。

摘要由CSDN通过智能技术生成

在tab控件上渲染多个echart图表，然后切换查看时，发现图表的宽度不正确

原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。

网上真的是太多太多太多坑了，服了，各种能不能用的都不先自己测试一下再贴上去，真心服了这些人。本来element tabs里面有个很好解决的办法就是在tab-pane添加上lazy='true’属性即可，不过现在已经没有这个属性了！没有了！看图，在这里插入图片描述
官方已经把这个属性去掉了，那么现在要怎么修改呢，这里有一个很好办法，亲测绝对有效。

原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab。

代码如下：

<template>
  <div>
    <el-tabs type="card" v-model="tabItem">
      <el-tab-pane label="第一页" name="tab1">
        <charts v-if="'tab1' === tabItem"></charts>
      </el-tab-pane>