TabCard 选项卡

TabCard 组件的作用与常见的 Tab 组件类似，主要用于页面中不同分类的数据表格的切换显示，支持展示不同分类的总数统计，需要搭配 Table 组件一起使用。

基础用法

<template>
  <TabCard :cards="cards" :tableRef="tableRef"/>
  <TableView ref="tableRef" :config="tableConfig" />
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { countData } from "~/api";
import TableView, { ITableConfig } from "~/components/common/TableView.vue";
import TabCard, { ICardConfig } from "~/components/common/TabCard.vue";

const tableRef = ref();

const firstTableConfig = reactive<ITableConfig>({
  // 此处省略 Table 配置
});

const secondTableConfig = reactive<ITableConfig>({
  // 此处省略 Table 配置
});

const tableConfig = reactive<ITableConfig>({...firstTableConfig});

const cards = reactive<Array<ICardConfig>>([
  {
    key: 'first',
    label: 'menu.first',
    icon: 'first-icon',
    tableConfig: firstTableConfig,
  },
  {
    key: 'second',
    label: 'menu.second',
    icon: 'second-icon',
    tableConfig: secondTableConfig,
  },
]);

onMounted(() => {
  countData().then(({ data }) => {
    let resultSet = data.data;
    for (var index in cards) {
      cards[index].count = resultSet[cards[index].key] ?? undefined;
    }
  })
})
</script>

TabCard 属性