tabs antd 动态数据 vue3

Ant Design (antd) 是一套基于 Vue 的开源 UI 组件库，它提供了丰富的、高度一致的设计和易于使用的 API，可以帮助开发者快速构建美观且功能强大的前端应用。Vue 3 是 Vue.js 的最新版本，它专注于性能优化和组件化。

在 Vue 3 中使用 Ant Design 动态数据展示，可以按照以下步骤操作：

1. 安装依赖：首先在你的 Vue 项目中安装 `@ant-design/vue` 和响应式计算相关的库如 `vue-composition-api` 或者 `pinia`（状态管理）。

npm install @ant-design/icons @ant-design/vue vue-composition-api
# 或者使用pinia作为状态管理
npm install pinia

2. 引入并配置：在入口文件或主组件中引入 AntD，并设置国际化、主题等选项。

3. 使用动态组件：在需要显示数据的地方，创建一个动态组件列表，通过条件渲染来展示不同类型的 tab。例如，你可以定义一个组件数组，每个元素对应一种数据类型，并在视图层上根据数据类型动态切换组件。

<template>
  <div>
    <a-tabs v-model="activeName" @tab-click="handleTabClick">
      <a-tab-pane :key="item.name" v-for="(item, index) in tabsData" :label="item.title">
        <component :is="item.component"></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ATabs, ATabPane } from '@ant-design-vue/components/tabs';

const tabsData = [
  // 根据实际数据填充，例如不同类型的数据
  {
    name: 'tab1',
    title: '数据一',
    component: 'YourComponent1'
  },
  {
    name: 'tab2',
    title: '数据二',
    component: 'YourComponent2'
  }
];

const activeName = ref('tab1');

function handleTabClick(tabName) {
  activeName.value = tabName;
}

// 检查数据是否已加载，如果未加载则可以显示 loading 状态或其他占位组件
// ...
</script>