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>
如图
学如逆水行舟，不进则退
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/157354.html
