vue 切换tab页,图表缩在一起

问题所在,tab页加载时机不对。可用v-if控制tab所在内容的加载时机,当切换到该tab页时再加载。

<el-tabs v-model="activeName" @tab-click="handleTabClick">
  <el-tab-pane label="逾期应收" name="second">
    <overdue-receive v-if="nowName === 'second'"></overdue-receive>
  </el-tab-pane>
  <el-tab-pane label="超期库存" name="third">
    <overdue-instock v-if="nowName === 'third'"></overdue-instock>
  </el-tab-pane>
</el-tabs>

或用

this.$nextTick(() => {
        this.$refs.chart1.chart.resize()
  this.$refs.chart2.chart.resize()
  this.$refs.chart3.chart.resize()
  this.handleSearch()
})
或用
this.$nextTick(function() {
  var myEvent = new Event('resize')
  myEvent.trig = 'manual'
  window.dispatchEvent(myEvent)
})

posted @ 2022-06-27 08:56  阿灿呀  阅读(86)  评论(0)    收藏  举报