阅读 330

解决element-ui中Tab切换vchart/echarts不显示

在element-ui中使用tab切换vchart图标,首次加载空白不显示的问题。

描述:第一栏Tab显示,第二栏使用了click点击加载,请求了数据但是dom没有更新.

因为页面首次加载只执行一次,数据请求完成但第二栏的dom依然没有加载。

解决办法(适用场景不同):

一,使用element-ui中tab自带属性 lazy延时加载,默认是false,这里添加为true即可

 <el-tab-pane label="累计客户" name="third" lazy>测试</el-tab-pane>
复制代码

二, 当vchart需要自适应不方便设置固定宽度时,且当tab子标签栏内内容直接为chart图标时

<el-tabs type="border-card" v-model="activeName">
  <el-tab-pane label="用户管理" name="1"> <!-- name 中的数字对应chart的ref -->
    <ve-line :data="chartData" ref="chart1"></ve-line>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="2">
    <ve-line :data="chartData" ref="chart2"></ve-line>
  </el-tab-pane>
</el-tabs>
复制代码

这里是 v-chart官方推荐 使用watch监听

watch: {
   activeName (v) {
     this.$nextTick(_ => {
        this.$refs[`chart${v}`].echarts.resize()
    })
  }
}
复制代码

三, 当el-tab-pane内为自定义组件时

如果当子标签内容为自定义组件时,这个时候我们会思考组件间传值问题,则不适用二场景。
<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="新增账户" name="second" lazy>
    <new-account :newAccountList="newAccountList"></new-account>
  </el-tab-pane>
  <el-tab-pane label="累计客户" name="third" lazy>
    <customers></customers>
  </el-tab-pane>
</el-tabs>  
复制代码

此时无法使用refs解析. 当我们在切换tab时就需要更新dom. 这里vue本身提供了$nextTick方法,在修改数据之后立即使用它,然后等待 DOM 更新。所以我们在请求发送请求之后,就可以完成vchart渲染操作。

getNewAccount(time) {
  const stime = time ? time[0] : "";
  const etime = time ? time[1] : "";
  this.newAccountList= [];
  this.$axios.get("dataCenter/increase", {
    params: { stime, etime }
  }).then(res => {
    let data = res.data.result.rows.reverse();
    this.$nextTick(() => {
      data.forEach(element => {
        this.newAccountList.push({
          '日期': element.day,
          '新增账户': element.increaseNum
        });
      });
      data = []
    });
  })
}
复制代码

菜鸟一枚,如有错误,欢迎指正。

关注下面的标签,发现更多相似文章
评论