当前位置：首页 > VUE

vue 实现tab表格

2026-02-18 03:39:13VUE

实现 Tab 表格的基本思路

Tab 表格通常指通过选项卡切换不同表格内容的交互方式。Vue 可以通过动态组件或条件渲染实现这一功能，结合表格组件（如 Element UI 的 el-table）完成数据展示。

方法 1：使用动态组件切换表格

通过 Vue 的 <component :is=""> 动态加载不同表格组件，适合表格结构差异较大的场景。

<template>
  <div>
    <div class="tab-container">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>
    <component :is="currentTab" :data="tableData[currentTab]" />
  </div>
</template>

<script>
import TableA from './TableA.vue';
import TableB from './TableB.vue';

export default {
  components: { TableA, TableB },
  data() {
    return {
      currentTab: 'TableA',
      tabs: [
        { name: 'TableA', label: '表格A' },
        { name: 'TableB', label: '表格B' }
      ],
      tableData: {
        TableA: [{ id: 1, name: '数据A1' }, { id: 2, name: '数据A2' }],
        TableB: [{ id: 1, value: '数据B1' }, { id: 2, value: '数据B2' }]
      }
    };
  }
};
</script>

方法 2：条件渲染同一表格

通过 v-if 切换同一表格的数据源，适合表格结构相同但数据不同的场景。

<template>
  <div>
    <div class="tab-container">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>
    <el-table :data="tableData[currentTab]">
      <el-table-column 
        v-for="col in columns[currentTab]" 
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'tab1',
      tabs: [
        { name: 'tab1', label: '表格1' },
        { name: 'tab2', label: '表格2' }
      ],
      tableData: {
        tab1: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }],
        tab2: [{ id: 3, age: 25 }, { id: 4, age: 30 }]
      },
      columns: {
        tab1: [{ prop: 'id', label: 'ID' }, { prop: 'name', label: '姓名' }],
        tab2: [{ prop: 'id', label: 'ID' }, { prop: 'age', label: '年龄' }]
      }
    };
  }
};
</script>

方法 3：结合 Element UI 的 Tabs 组件

若使用 Element UI，可直接利用其 el-tabs 组件实现更规范的选项卡交互。

<template>
  <el-tabs v-model="currentTab">
    <el-tab-pane 
      v-for="(tab, index) in tabs" 
      :key="index"
      :label="tab.label" 
      :name="tab.name"
    >
      <el-table :data="tableData[tab.name]">
        <el-table-column 
          v-for="col in columns[tab.name]" 
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
        />
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'tab1',
      tabs: [
        { name: 'tab1', label: '员工表' },
        { name: 'tab2', label: '部门表' }
      ],
      tableData: {
        tab1: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }],
        tab2: [{ id: 101, dept: '技术部' }, { id: 102, dept: '市场部' }]
      },
      columns: {
        tab1: [{ prop: 'id', label: 'ID' }, { prop: 'name', label: '姓名' }],
        tab2: [{ prop: 'id', label: 'ID' }, { prop: 'dept', label: '部门' }]
      }
    };
  }
};
</script>