Vue tab切换同一个表格

可以通过在Vue组件中使用条件渲染来实现同一个表格的tab切换。具体实现如下：

1. 在Vue组件中定义一个data属性，用于存储当前选中的tab的索引值，例如：

data() {
  return {
    activeTab: 0
  }
}

2. 在模板中使用v-for指令循环渲染tab按钮，并使用v-bind:class指令动态绑定active类：

<div class="tabs">
  <div v-for="(tab, index) in tabs" :key="index" 
       :class="{ 'active': activeTab === index }" 
       @click="activeTab = index">{{ tab }}</div>
</div>

3. 在模板中使用v-if指令根据activeTab的值来渲染对应的表格内容：

<table v-if="activeTab === 0">
  <!-- 表格内容1 -->
</table>
<table v-if="activeTab === 1">
  <!-- 表格内容2 -->
</table>
<!-- 其他表格内容 -->

完整的示例代码如下：

<template>
  <div>
    <div class="tabs">
      <div v-for="(tab, index) in tabs" :key="index" 
           :class="{ 'active': activeTab === index }" 
           @click="activeTab = index">{{ tab }}</div>
    </div>
    <table v-if="activeTab === 0">
      <!-- 表格内容1 -->
    </table>
    <table v-if="activeTab === 1">
      <!-- 表格内容2 -->
    </table>
    <!-- 其他表格内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: ['Tab 1', 'Tab 2', 'Tab 3']
    }
  }
}
</script>

<style>
.tabs {
  display: flex;
}
.tabs > div {
  margin-right: 10px;
  cursor: pointer;
  padding: 5px;
  border: 1px solid #ccc;
}
.tabs > div.active {
  background-color: #ccc;
}
</style>