vue仿tab实现

1、应用场景

单页面存在多个tab，其中多个tab中都存在大量的数据请求。普通的tab在首页面展示时会对所有tab的数据进行请求，浪费资源，引起页面卡顿。使用该tab可以有效解决单页面数据请求与数据渲染问题，利用 在tab切换时只需要根据id动态修改currentTabComponent的值,也可以往组件中传值。

2、效果截图

3、代码实现

<!-- 首页 -->
<template>
  <div class="mainContainer">
    <div class="tabArea">
      <div class="overFlowTabArea">
        <el-button
          v-for="item in tabType"
          :key="item.id"
          @click="handleTab(item.id)"
          :class="{ isActive: item.id == activeTab }"
          >{{ item.name }}</el-button
        >
      </div>
    </div>
    <div class="mainTabInfo">
      <component :is="currentTabComponent" :tabArr="tabArr"></component>
    </div>
  </div>
</template>

<script>
import AllDynamicRoute from "@/views/steelResearchCompute/cloudCompute/dynamicRoute/AllDynamicRoute_index"; // 全部菜单
import FirstPrinciples from "@/views/steelResearchCompute/cloudCompute/dynamicRoute/FirstPrinciples_index"; // xxx
import CALPHAD from "@/views/steelResearchCompute/cloudCompute/dynamicRoute/CALPHAD_index"; //xxx
import Spread from "@/views/steelResearchCompute/cloudCompute/dynamicRoute/Spread_index"; // xxx
import Multiphase from "@/views/steelResearchCompute/cloudCompute/dynamicRoute/Multiphase_index"; // xxx

export default {
  components: {
    AllDynamicRoute,
    FirstPrinciples,
    CALPHAD,
    Spread,
    Precipitation,
    Multiphase,
    Limited,
    Fluid,
    Coupling,
    Other,
  },
  data() {
    return {
      computeMenuData: [], // 云计算菜单数据
      tabType: [
        // 仿Tab 按钮资源
      ],
      activeTab: "FirstPrinciples", // 激活状态下的tab
      currentTabComponent: FirstPrinciples, // 激活状态下tab对应的数据信息
      tabArr: [
        // 当前tab显示数据
      ],
      allDynamicRouteArr: [
        // 所有的三级菜单
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 点击按钮切换菜单
    handleTab(id) {
      this.activeTab = id;
      switch (id) {
        case "AllDynamicRoute":
          this.currentTabComponent = AllDynamicRoute;
          break;
        case "FirstPrinciples":
          this.currentTabComponent = FirstPrinciples;
          break;
        case "CALPHAD":
          this.currentTabComponent = CALPHAD;
          break;
        case "Multiphase":
          this.currentTabComponent = Multiphase;
          break;
        case "Spread":
          this.currentTabComponent = Spread;
          break;
        case "MyComputeTask":
          this.$router.push("/steelResearchCompute/myComputeTask");
          return;
          break;
      }
      this.getTabArr(id);
    },
    // 获取当前tab的二级菜单
    getTabArr(id) {
      if (id == "AllDynamicRoute") {
        this.tabArr = JSON.parse(JSON.stringify(this.allDynamicRouteArr));
      } else {
        let arr = [];
        this.computeMenuData.some((item) => {
          if (item.category == id) {
            let categoryList = item.categoryList; // tab对应的二级菜单
            categoryList.forEach((item1) => {
              // InstructionMode : 1 指令模式，2 图形模式
              let routerPath =
                item1.InstructionMode == "2"
                  ? "/steelResearchCompute/cloudCompute"
                  : "/steelResearchCompute/instructionModeCompute";
              arr.push({
                id: item1.ID,
                name: item1.ChineseName,
                secondName: item1.ChineseName,
                picLocal: process.env.VUE_APP_DOWNLOAD_IP + item1.SoftAlgorithmCoverIcon,
                routerPath: routerPath,
              });
            });
            return true;
          }
        });
        this.tabArr = arr;
      }
    },
    // 初始化
    init() {
      // 钢研云计算所有动态的二级菜单
      let computeMenuData = this.$store.getters.computeMenuData;
      this.computeMenuData = computeMenuData;
      this.tabType = [{ id: "AllDynamicRoute", name: "全部" }];
      if (computeMenuData.length > 0) {
        computeMenuData.forEach((item) => {
          this.tabType.push({ id: item.category, name: item.categoryText });
          // 获取所有的三级菜单
          item.categoryList.forEach((item1) => {
            let routerPath =
              item1.InstructionMode == "2"
                ? "/steelResearchCompute/cloudCompute"
                : "/steelResearchCompute/instructionModeCompute";
            this.allDynamicRouteArr.push({
              id: item1.ID,
              name: item1.ChineseName,
              secondName: item1.ChineseName,
              picLocal: process.env.VUE_APP_DOWNLOAD_IP + item1.SoftAlgorithmCoverIcon,
              routerPath: routerPath,
            });
          });
        });
        // 添加我的计算任务tab
        this.tabType.push({ id: "MyComputeTask", name: "我的计算任务" })
        this.handleTab("AllDynamicRoute");
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {},
};
</script>
<style lang='scss'>
//  仿Tab 按钮样式
.mainContainer {
  padding: 0px;
  .overFlowTabArea {
    width: auto;
    height: 100%;
  }
  .tabArea .overFlowTabArea > .el-button--medium {
    padding: 10px;
    border-radius: 2px;
    margin-left: 2px;
  }
}
</style>