Vue + el-tabs + echarts 样式失效问题

原创于 2021-03-18 10:24:54 发布 · 723 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种解决Vue项目中切换不同Tab时样式失效的问题的方法。通过使用v-if指令来控制组件的渲染，确保每次切换Tab时组件能够重新加载，从而避免样式失效的情况发生。

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

样式失效截图：

解决方案：将 tab 下的组件用 v-if 判断，重新渲染即可。

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="仪表盘1" name="first">
      <Dashboard1 v-if="activeName == 'first'"></Dashboard1>
    </el-tab-pane>
    <el-tab-pane label="仪表盘2" name="second">
      <Dashboard2 v-if="activeName == 'second'"></Dashboard2>
    </el-tab-pane>
    <el-tab-pane label="仪表盘3" name="third">
      <Dashboard3 v-if="activeName == 'third'"></Dashboard3>
    </el-tab-pane>
  </el-tabs>
</template>

参考文章：https://www.jb51.net/article/192365.htm