20-vue中再tab标签下,将饼图和表格左右排版和上下排版
左右排版,如下图
主要是css样式的控制,如下
<template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="概览" name="all"> <div class="chart-container"> <chart v-if=" 'all' === activeName"/> </div> <div class="alter-table"> <AlterTable height="100%" width="100%"></AlterTable> </div> </el-tab-pane> <el-tab-pane label="Zabbix" name="zabbix"> <div class="chart-container"> <chart v-if=" 'zabbix' === activeName" lazy='true'/> </div> <div class="alter-table"> <AlterTable height="100%" width="100%"></AlterTable> </div> </el-tab-pane> <el-tab-pane label="阿里云监控" name="aliyun">阿里云监控</el-tab-pane> <el-tab-pane label="AWS监控" name="aws">AWS监控</el-tab-pane> <el-tab-pane label="其他" name="other">其他</el-tab-pane> </el-tabs> </div> </template> <script> import Chart from "./pie"; import AlterTable from "./table"; import { truncate } from "fs"; export default { name: "PieChart", components: { Chart, AlterTable }, data() { return { chartShow: true, activeName: "all" }; }, methods: { handleClick(tab, event) { if (tab.name == "zabbix") { console.log(tab, event); this.chartShow = true; } } } }; </script> <style scoped> .el-tabs__content > .el-tab-pane { display: block; } .chart-container { float: left; width: 50%; height: calc(100vh - 300px); } .alter-table { float: right; width: 50%; height: calc(100vh - 500px); } </style>
上下排版,如下图
css配置如下(相比于上面是去掉display: block;,然后宽度各占100%即可)
<template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="概览" name="all"> <div class="chart-container"> <chart v-if=" 'all' === activeName"/> </div> <div class="alter-table"> <AlterTable height="100%" width="100%"></AlterTable> </div> </el-tab-pane> <el-tab-pane label="Zabbix" name="zabbix"> <div class="chart-container"> <chart v-if=" 'zabbix' === activeName" lazy='true'/> </div> <div class="alter-table"> <AlterTable height="100%" width="100%"></AlterTable> </div> </el-tab-pane> <el-tab-pane label="阿里云监控" name="aliyun">阿里云监控</el-tab-pane> <el-tab-pane label="AWS监控" name="aws">AWS监控</el-tab-pane> <el-tab-pane label="其他" name="other">其他</el-tab-pane> </el-tabs> </div> </template> <script> import Chart from "./pie"; import AlterTable from "./table"; import { truncate } from "fs"; export default { name: "PieChart", components: { Chart, AlterTable }, data() { return { chartShow: true, activeName: "all" }; }, methods: { handleClick(tab, event) { if (tab.name == "zabbix") { console.log(tab, event); this.chartShow = true; } } } }; </script> <style scoped> .el-tabs__content > .el-tab-pane { /* display: block; */ } .chart-container { /* float: left; */ width: 100%; height: calc(100vh - 300px); /* height: 100%; */ } .alter-table { /* float: right; */ width: 100%; height: calc(100vh - 500px); } </style>
做有积累的事~~