Vue使用Tab页切换EChart，图表显示变形，未铺满父容器踩坑

在使用Tab页第一次切换到有echart页面时，发现echart画的图形未铺满父容器。那是因为父容器最初是被隐藏的，高宽为0。先提出方案解决这个问题。elementUi为例：1.利用v-if值切换来重绘图形页面。当前tab的name为‘line’,切换到图形页面时，v-if条件满足直接重绘子组件图形。这样绘画的图形就会铺满父容器2.lazy=’true’这个是...

不知名码农1994

3466人浏览 · 2019-09-20 10:20:10

不知名码农1994 · 2019-09-20 10:20:10 发布

在使用Tab页第一次切换到有echart页面时，发现echart画的图形未铺满父容器。那是因为父容器最初是被隐藏的，高宽为0。

先提出方案解决这个问题。

elementUi为例：

1.利用v-if值切换来重绘图形页面。

当前tab的name为‘line’,切换到图形页面时，v-if条件满足直接重绘子组件图形。这样绘画的图形就会铺满父容器

2.lazy="true"

这个是最简单方便的，在el-tab-pane加上 lazy=’true’属性

官方对lazy的解释是延迟加载，也就是待tab页切换时，父容器tab渲染完毕再去渲染子组件。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^