当前位置：首页 > VUE

vue+实现table切换

2026-01-23 01:42:05VUE

Vue 实现 Table 切换的方法

在 Vue 中实现表格切换功能，可以通过动态渲染不同的表格数据或切换不同的表格组件来完成。以下是几种常见的实现方式：

动态绑定表格数据

通过切换数据源实现表格内容的切换，适合表格结构相同但数据不同的场景。

vue+实现table切换

<template>
  <div>
    <button @click="currentTable = 'table1'">表格1</button>
    <button @click="currentTable = 'table2'">表格2</button>

    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in currentData" :key="row.id">
          <td v-for="cell in row" :key="cell">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTable: 'table1',
      table1: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ],
      table2: [
        { id: 1, name: '王五', age: 28 },
        { id: 2, name: '赵六', age: 35 }
      ],
      headers: ['ID', '姓名', '年龄']
    }
  },
  computed: {
    currentData() {
      return this[this.currentTable]
    }
  }
}
</script>

使用组件切换

当不同表格的结构差异较大时，可以使用动态组件切换不同的表格组件。

<template>
  <div>
    <button @click="currentComponent = 'Table1'">表格1</button>
    <button @click="currentComponent = 'Table2'">表格2</button>

    <component :is="currentComponent" />
  </div>
</template>

<script>
import Table1 from './Table1.vue'
import Table2 from './Table2.vue'

export default {
  components: { Table1, Table2 },
  data() {
    return {
      currentComponent: 'Table1'
    }
  }
}
</script>

使用 v-if 条件渲染

适合少量表格切换的情况，代码结构简单直观。

vue+实现table切换

<template>
  <div>
    <button @click="showTable1 = true">表格1</button>
    <button @click="showTable1 = false">表格2</button>

    <table v-if="showTable1">
      <!-- 表格1内容 -->
    </table>

    <table v-else>
      <!-- 表格2内容 -->
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTable1: true
    }
  }
}
</script>

使用路由切换

对于更复杂的应用，可以通过路由参数实现表格切换。

<template>
  <div>
    <router-link to="/table1">表格1</router-link>
    <router-link to="/table2">表格2</router-link>

    <router-view></router-view>
  </div>
</template>

使用 Tab 组件结合表格

结合 UI 框架的 Tab 组件实现更美观的表格切换效果（以 Element UI 为例）。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="表格1" name="table1">
      <table>
        <!-- 表格1内容 -->
      </table>
    </el-tab-pane>
    <el-tab-pane label="表格2" name="table2">
      <table>
        <!-- 表格2内容 -->
      </table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'table1'
    }
  }
}
</script>