<a-tabs @change="changeTab"> 如何首次加载每个tab的时候给一个loading

在Ant Design Vue中的`<a-tabs>`组件中，如果你想在切换到每个tabpanel（标签页）之前显示一个加载状态，你可以利用`v-if`或`transition`指令结合一个loading组件来实现。当用户第一次切换到某个tab时，你可以显示一个`loading`组件，然后在`changeTab`事件处理函数里处理数据加载。

首先，在你的tabs上添加一个初始状态，比如`activeKey`，表示默认激活的第一个tab：

<a-tabs v-loading="isLoading" @change="changeTab" :active-key="activeKey">
  <template v-for="(item, index) in tabsList" :key="index">
    <a-tab :key="item.key" :tab="item.title" :disabled="item.disabled">
      <template slot="content">
        <div v-if="isLoading && activeKey === item.key">
          <loading :percentage="0" type="circle" />
        </div>
        <!-- 这里放真正的内容，如果是异步加载数据，则内容可能为空 -->
        <p v-if="dataList[index]">数据显示区</p>
      </template>
    </a-tab>
  </template>
</a-tabs>

然后在`changeTab`函数中，加载数据并更新`isLoading`的状态：

methods: {
  changeTab(tabKey) {
    this.activeKey = tabKey;
    // 假设`loadData`是你的异步数据加载方法
    this.isLoading = true;
    this.loadData(tabKey).then((data) => {
      this.dataList[tabKey] = data; // 存储每个tab的数据
      this.isLoading = false; // 显示结束
    }).catch(() => {
      // 处理加载失败的情况
      this.isLoading = false;
    });
  },
}

在上面的代码中，当你切换tab时，会触发`isLoading`的变化，同时开始异步加载数据。如果加载完成，数据会被保存到对应的数组位置，`loading`组件就会隐藏。