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>