Vue解决echart在element的tab切换时显示不正确问题

最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确

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

网上的解决方案大多都是监听tab的切换事件，然后再根据切换的页面重新渲染echart组件，比较麻烦。

如下是个人的解决方法：

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

举例如下：

<el-tabs type='card' v-model='tabItem'> <el-tab-pane name='heart'> <span slot='label'><icon name='heart' scale='2'></icon>心率</span> <baseline ref='heart' :chartData='{}' v-if='’heart’ === tabItem'></baseline> </el-tab-pane> <el-tab-pane name='breath'> <span slot='label'><icon name='breath' scale='2'></icon>呼吸</span> <baseline ref='breath' :chartData='{}' v-if='’breath’ === tabItem'></baseline> </el-tab-pane> <el-tab-pane label='体动' name='move'> <span slot='label'><icon name='move' scale='2'></icon>体动</span> <baseline ref='move' :chartData='{}' v-if='’move’ === tabItem'></baseline> </el-tab-pane></el-tabs>

这里默认tab为心率tab，当切换时，同一时刻只有一个v-if为true，当将其设置为true时，Vue会重新在页面渲染组件，即完成了组件渲染的步骤。

补充知识：有关el-tab-pane中echarts图遇到的问题(element中的Tabs 标签页)

在项目中,遇到了一个奇怪问题:

element中的el-tabs组件,在el-tab-pane引入echarts图标时,刷新时没有图标出现,如果将浏览器窗口缩小一点,就可以展示.

解决方案：

在echarts中加入v-if来解决 (另外,有时我们在项目中用v-show也会出现上述类似情况,将v-show改成v-if试试就可以解决)

<template> <el-tabs v-model='activeName' @tab-click='handleClick'> <el-tab-pane label='用户管理' name='first'>用户管理</el-tab-pane> <el-tab-pane label='配置管理' name='second'>配置管理</el-tab-pane> <el-tab-pane label='角色管理' name='third'>角色管理</el-tab-pane> <el-tab-pane label='定时任务补偿' name='fourth'> <div v-loading='loadingDetail' element-loading-spinner='el-icon-loading' > <echart-line v-if='’fourth’ === activeName' //在这里加上这句话就可以解决上面的问题 :category='chartData.category' :data='chartData.data' :unit='chartData.unit' ></echart-line> </div> </el-tab-pane> </el-tabs></template><script>import echartLine from '@/components/echarts/line' export default { components: { echartLine }, data() { return { activeName: ’second’ }; }, methods: { handleClick(tab, event) { console.log(tab, event); } } };</script>

拿走，不用谢!!!

以上这篇Vue解决echart在element的tab切换时显示不正确问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。