vue 实现tab表格

实现 Tab 表格的基本思路

在 Vue 中实现 Tab 表格功能，通常需要结合 v-for 动态渲染表格内容，并通过 v-if 或 v-show 控制不同 Tab 的显示切换。核心逻辑是通过数据驱动视图变化。

基础实现步骤

1. 定义数据结构

准备 Tab 标签数据和对应的表格数据，通常以数组形式存储：

data() {
  return {
    activeTab: 'tab1', // 当前激活的 Tab
    tabs: [
      { id: 'tab1', label: '表格1' },
      { id: 'tab2', label: '表格2' }
    ],
    tableData: {
      tab1: [
        { id: 1, name: 'A' },
        { id: 2, name: 'B' }
      ],
      tab2: [
        { id: 3, name: 'C' },
        { id: 4, name: 'D' }
      ]
    }
  }
}

2. 渲染 Tab 标签

使用 v-for 循环渲染 Tab 标签，并通过 :class 动态设置激活状态：

<div class="tabs">
  <button 
    v-for="tab in tabs" 
    :key="tab.id"
    :class="{ 'active': activeTab === tab.id }"
    @click="activeTab = tab.id"
  >
    {{ tab.label }}
  </button>
</div>

3. 切换表格内容

通过 v-show 或 v-if 控制不同 Tab 对应的表格显示：

<table v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tableData[tab.id]" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </tbody>
</table>

进阶优化方案

动态加载表格数据

如果表格数据量较大，可以通过异步加载方式优化性能：

methods: {
  async loadTableData(tabId) {
    if (!this.tableData[tabId]) {
      const res = await fetchData(tabId); // 模拟 API 请求
      this.$set(this.tableData, tabId, res.data);
    }
  }
},
watch: {
  activeTab(newVal) {
    this.loadTableData(newVal);
  }
}

使用组件化拆分

将 Tab 和 Table 拆分为独立组件，提高复用性：

<template>
  <div>
    <Tabs :tabs="tabs" v-model="activeTab" />
    <DataTable :data="tableData[activeTab]" />
  </div>
</template>

添加过渡动画

通过 Vue 的 <transition> 组件实现平滑切换效果：

<transition name="fade" mode="out-in">
  <DataTable 
    :key="activeTab"
    :data="tableData[activeTab]" 
  />
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

完整示例代码

<template>
  <div class="tab-table-container">
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="{ 'active': activeTab === tab.id }"
        @click="switchTab(tab.id)"
      >
        {{ tab.label }}
      </button>
    </div>

    <transition name="fade" mode="out-in">
      <table :key="activeTab">
        <thead>
          <tr>
            <th v-for="col in columns" :key="col">{{ col }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData[activeTab]" :key="item.id">
            <td v-for="col in columns" :key="col">{{ item[col.toLowerCase()] }}</td>
          </tr>
        </tbody>
      </table>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'users',
      columns: ['ID', 'Name', 'Email'],
      tabs: [
        { id: 'users', label: '用户表' },
        { id: 'products', label: '产品表' }
      ],
      tableData: {
        users: [
          { id: 1, name: '张三', email: 'zhang@example.com' },
          { id: 2, name: '李四', email: 'li@example.com' }
        ],
        products: [
          { id: 101, name: '手机', email: 'electronics' },
          { id: 102, name: '笔记本', email: 'office' }
        ]
      }
    }
  },
  methods: {
    switchTab(tabId) {
      this.activeTab = tabId;
    }
  }
}
</script>

<style scoped>
.tabs {
  margin-bottom: 20px;
}
.tabs button {
  padding: 8px 16px;
  margin-right: 5px;
  background: #eee;
  border: none;
  cursor: pointer;
}
.tabs button.active {
  background: #42b983;
  color: white;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>