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


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

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

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

解决办法（适用场景不同）：

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

1
 <el-tab-pane label="累计客户" name="third" lazy>测试</el-tab-pane>

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

1
2
3
4
5
6
7
8
<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监听

1
2
3
4
5
6
7
watch: {
   activeName (v) {
     this.$nextTick(_ => {
        this.$refs[`chart${v}`].echarts.resize()
    })
  }
}

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

如果当子标签内容为自定义组件时，这个时候我们会思考组件间传值问题，则不适用二场景。
1
2
3
4
5
6
7
8
<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渲染操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 = []
    });
  })
}

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