vue element使用echarts切换tab标签出现图表被压缩变形,宽度变窄问题
vue element使用echarts切换tab标签出现图表被压缩变形,宽度变窄问题在tabs切换中有echarts的话,我们会发现初始化的那个echarts是有宽度的,当点击tabs切换之后,切换过来的echarts只剩下100px的宽度。这是因为渲染的时机不对,我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts,而不是在页面初始化的时候就把所有tabs里面的e
·
vue element使用echarts切换tab标签出现图表被压缩变形,宽度变窄问题
其实这个Tab下的内容在刚进入这个url时(点击这个tab前)就已经被渲染好了,在你点击tab展开内容时就发生了这样的格式问题。
在tabs切换中有echarts的话,我们会发现初始化的那个echarts是有宽度的,当点击tabs切换之后,切换过来的echarts只剩下100px的宽度。
这是因为渲染的时机不对,我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts,而不是在页面初始化的时候就把所有tabs里面的echarts都执行。
因为echarts会根据父级给宽度,而在初始化页面的时候其他tabs切换是display:none;没有宽度,所以会发生以上问题
所以根据官方文档,最简单的方法 加一个 :lazy = "true"
解决了
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="标签一" name="first" :lazy="true">
<index1 />
</el-tab-pane>
<el-tab-pane label="标签二" name="second" :lazy="true">
<index2 />
</el-tab-pane>
</el-tabs>
</template>
更多推荐
已为社区贡献1条内容
所有评论(0)