1. 先上图

2. 代码

<el-tabs type="border-card" style="width: 50%; float: left">
    <el-tab-pane label="CPU占用 TOP5">
      <cpu-chart />
    </el-tab-pane>
    <el-tab-pane label="内存使用 TOP5">
      <memory-chart />
    </el-tab-pane>
</el-tabs>

经查资料发现，原因是图标在加载时，找不到对应的div大小，所以给了一个默认大小。可以利用v-if解决。

解决

<template>
<el-tabs v-model="activeName" @tab-click="handleClick"    type="border-card" style="width: 50%; float: left">
   <el-tab-pane label="CPU占用 TOP5" name="first-cpu">
     <cpu-chart v-if="'first-cpu' == activeName" />
   </el-tab-pane>
   <el-tab-pane label="内存使用 TOP5" name="second-memory">
     <memory-chart v-if="'second-memory' == activeName" />
   </el-tab-pane>
</el-tabs>
</template>
<script>
export default {
components: {CpuChart, MemoryChart}
data() {
	return{
	activeName: 'first-cpu'
	}
},
methods: {
	handleClick(tab, event) {
      // console.log(tab, event)
    }
}
}
</script>

如图

学如逆水行舟，不进则退