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

最新推荐文章于 2024-11-05 14:13:57 发布

原创最新推荐文章于 2024-11-05 14:13:57 发布 · 751 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts

Vue 专栏收录该内容

27 篇文章

订阅专栏

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

样式失效截图：

解决方案：将 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