ads_web/src/views/reportManage/dataCenter/index.vue

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import CombinedDisplay from '/src/views/reportManage/dataCenter/combinedDisplay/index.vue'
// import DataExport from '/src/views/reportManage/dataCenter/normalDisplay/components/DataExport.vue'
import CompareData from '/src/views/reportManage/dataCenter/normalDisplay/components/CompareData.vue'
import NormalDisplay from '/src/views/reportManage/dataCenter/normalDisplay/index.vue'

const activeName = ref('NormalDisplay')
const tabsComponents: any = {
  NormalDisplay,
  CombinedDisplay,
  // CompareData,
  // DataExport,
}
const panes = [
  { label: '普通展示', name: 'NormalDisplay' },
  { label: '合并展示', name: 'CombinedDisplay' },
  // { label: '对比数据', name: 'CompareData' },
  // { label: '数据导出', name: 'DataExport' },
]

/**
 *
 * @param tab
 * @param event
 */
function handleTabClick(tab: TabsPaneContext, event: Event) {
  return 'test name'
}
</script>

<template>
  <div class="pr-2">
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane v-for="pane in panes" :key="pane.name" :label="pane.label" :name="pane.name"></el-tab-pane>
      <component :is="tabsComponents[activeName]"></component>
    </el-tabs>
  </div>
</template>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>