index.vue

<!--
 * @Author: your name
 * @Date: 2022-03-08 17:28:57
 * @LastEditTime: 2022-03-28 17:20:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
-->
<template>
  <div class="monitorData">
    <div class="iconfont">
      <div
        v-for="(item, index) in changeIcon"
        :key="item.class"
        :class="[item.class, { active: isCom == index }]"
        @click="isComChange(index)"
      ></div>
    </div>
    <transition name="fade-transform" mode="out-in">
      <keep-alive>
        <component :is="currentTabComponent"></component>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import charsData from "./component/charsData";
import tabledata from "./component/tableData";
export default {
  data() {
    return {
      // currentTabComponent: tabledata,
      changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
      isCom: 1,
    };
  },
  computed: {
    currentTabComponent() {
      return this.isCom == 0 ? tabledata : charsData;
    },
  },
  methods: {
    isComChange(index) {
      this.isCom = index;
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("~@/assets/iconfont/monitorData/iconfont.css");
.iconfont {
  display: flex;
  justify-content: right;
  margin-right: 37px;
  padding-top: 15px;
  div {
    cursor: pointer;
    padding: 4px;
    &.active,
    &:hover {
      background-color: #666666;
      color: #fff;
    }
  }
  .icon-b {
    margin-right: 23px;
  }
}
</style>>