<a-tabs> 中 如何在首次点击每个tab的时候 加载一次数据

在 Vue.js 的 `<a-tabs>` 组件中，如果你想在用户第一次点击每个 tab 时加载数据，你可以结合 `v-if` 或者 `v-show` 指令以及 `@click` 事件来实现。以下是一个简单的例子：

<a-tabs v-model="activeIndex" @click="loadData">
  <a-tabpane v-for="(item, index) in tabs" :key="index" :title="item.title" v-if="!loaded[index]">
    <template slot="content">
      <div v-loading="isLoading[index]" slot="placeholder">正在加载...</div>
      <div v-if="loaded[index]">{{ item.content }}</div>
    </template>
  </a-tabpane>
</a-tabs>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      tabs: [...], // 初始化你的tabs数组
      loaded: Array.from({ length: tabs.length }, () => false), // 初始化已加载标识
      isLoading: Array.from({ length: tabs.length }, () => false), // 初始化加载状态
    };
  },
  methods: {
    async loadData(tabIndex) {
      const self = this;
      if (!self.loaded[tabIndex]) {
        self.isLoading[tabIndex] = true; // 设置当前tab开始加载
        await yourDataLoadingFunction(tabIndex); // 替换为实际的异步数据加载函数
        self.loaded[tabIndex] = true; // 数据加载完成后标记为已加载
        self.isLoading[tabIndex] = false; // 关闭加载指示
      }
    },
  },
};
</script>

在这个例子中，当用户第一次点击某个 tab 时，`loadData` 方法会被调用，只有在对应的数据还未加载时才会开始加载。`v-loading`指令会显示一个加载动画直到数据加载完成。