vue tab切换 表格

Vue.js 是一个用于构建用户界面的渐进式框架。在Vue中实现tab切换与表格的结合使用，通常是通过动态组件或者条件渲染的方式，根据当前选中的tab来显示相应的表格内容。

以下是一个简单的例子来说明如何使用Vue实现tab切换显示不同表格的功能：

1. 首先定义数据结构，包括tab列表和对应的表格数据。
2. 使用`v-for`指令来遍历tab列表，为每个tab创建一个按钮作为切换入口。
3. 使用`v-if`或`v-show`指令根据当前选中的tab来决定哪个表格显示。

<template>
  <div>
    <!-- tab切换按钮 -->
    <div v-for="(tab, index) in tabs" :key="index" class="tab-button">
      <button @click="selectTab(index)">{{ tab.name }}</button>
    </div>
    
    <!-- 根据选中的tab显示对应的表格 -->
    <div v-if="currentTab === 0">
      <table>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
        <tr v-for="item in tableData1" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </table>
    </div>
    <div v-else-if="currentTab === 1">
      <table>
        <tr>
          <th>ID</th>
          <th>Age</th>
        </tr>
        <tr v-for="item in tableData2" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </table>
    </div>
    <!-- 更多表格... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Table 1', index: 0 },
        { name: 'Table 2', index: 1 },
        // 更多tab...
      ],
      currentTab: 0,
      tableData1: [
        // 表格1的数据
      ],
      tableData2: [
        // 表格2的数据
      ],
      // 更多表格数据...
    };
  },
  methods: {
    selectTab(index) {
      this.currentTab = index;
    }
  }
}
</script>

<style>
/* 添加一些基本的样式 */
.tab-button {
  /* 样式代码 */
}
</style>

在这个例子中，我们定义了一个`tabs`数组来存储tab信息，`currentTab`来跟踪当前选中的tab索引，以及两个表格的数据`tableData1`和`tableData2`。通过点击不同的tab切换按钮，会调用`selectTab`方法更新`currentTab`的值，从而根据当前选中的tab显示对应的表格内容。