vue3.0 关于Tabs 标签页切换页面不调接口问题

 在用vue3.0写页面时，点击el-tabs时没有调到接口，而是在第一个页面把所有的接口都调了一遍。每个接口所携带的参数又不一样，这就导致了接口报错，这不是我们想要的。这时我们可以给每个tabs加个判断，当我们点击的tabs名字和我们加的名字一致时，才调接口，之后就不会出现第一个页面调所有接口的情况了。

具体代码如下：

  <el-tabs
        type="border-card"
        class="demo-tabs"
        v-model="user.activeName"
        @tab-click="handleClick"
        :key="tabIndex"
      >
        <el-tab-pane name="first">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><Clock /></el-icon>
              <span>流量查询</span>
            </span>
          </template>
          <historyFlow v-if="tabsArray.first"></historyFlow>
        </el-tab-pane>
        <el-tab-pane name="second">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><Calendar /></el-icon>
              <span>账户查询</span>
            </span>
          </template>
          <accounts v-if="tabsArray.second"></accounts>
        </el-tab-pane>
        <el-tab-pane name="third">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><Tickets /></el-icon>
              <span>访问查询</span>
            </span>
          </template>
          <accountsTopu v-if="tabsArray.third"></accountsTopu>
        </el-tab-pane>
        <el-tab-pane name="fourth">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><Grid /></el-icon>
              <span>信息查询</span>
            </span>
          </template>
          <traceabApply v-if="tabsArray.fourth"></traceabApply>
        </el-tab-pane>
      </el-tabs>

const user = reactive({
  activeName: 'first',
});
const tabsArray = reactive({
  first: true,
  second: false,
  third: false,
  fourth: false,
  fifth: false,
});
// tabs的切换点击方法 tab中的paneName是当前点击选中的那一项的name的值
const handleClick = tab => {
  for (var key in tabsArr) {
    if (tab.paneName!= key) {
      tabsArr[key] = false;
    } else {
      tabsArr[key] = true;
    }
  }
};