vue element 切换tab标签echarts出现图表被压缩变形问题

_想睡觉

于 2023-02-09 11:29:21 发布

阅读量1.5k

点赞数 2

分类专栏： vue element vue vscode 文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/abcdefg182/article/details/128949878

版权

vue 同时被 3 个专栏收录

12 篇文章

订阅专栏

vue element

7 篇文章

订阅专栏

vscode

5 篇文章

订阅专栏

博客主要解决了Vue中ECharts在Tabs切换时的加载问题。由于初始化页面时其他Tabs切换无宽度，不应在页面初始化时执行所有Tabs里的ECharts，而是在点击当前切换且ECharts父级加载完毕后执行，通过给Tabs加上:lazy = \true\可解决该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

是因为初始化页面的时候其他tabs切换是display：none，是没有宽度的
我们只需要点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。
所以根据element官方文档关于tabs，加上 :lazy = "true"就解决了（lazy：标签是否延迟渲染）

 <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second"  :lazy = "true">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>