之前自己写tab,出现了很多bug,这里记录一下。

一、v-show

子组件和插件如果放在tab2加载会失效,除非首次加载的时候加载tab2。

转换思路,用v-if。

二、v-if

(1)页面切换回去时echarts不会渲染

这时候在切换tab的点击事件中使用$nextTick()回调echarts函数就可以解决问题。

// 切换tab1和tab2
changeTab(active) {
  this.activeName = active;
  if (this.activeName == 0) {
    //回调echarts
    this.$nextTick(() => {
      this.draw_echarts();
    });
  } else {}
},

(2)因为页面内容过多,tab1的echarts泄露到tab2上,挤占tab2空间

这时候在切换tab的点击事件中打印tab1中id为"mychart"的div,是可以获取到html片段的,虽然tab2上并没有这个div。

 这时候需要先用getInstanceByDom()获取到echarts实例,再用dispose()将其销毁。

// 切换tab1和tab2
changeTab(active) {
  this.activeName = active;
  if (this.activeName == 0) {
    //回调echarts
    this.$nextTick(() => {
      this.draw_echarts();
    });
  } else {
    console.log(document.getElementById("mychart"));
    this.echarts.getInstanceByDom(document.getElementById("mychart")).dispose();
  }
},

Logo

前往低代码交流专区

更多推荐