vue 实现table切换

Vue 实现表格切换的几种方法

方法一：使用 v-if 或 v-show 动态切换表格

通过 Vue 的指令控制不同表格的显示与隐藏，适合表格结构差异较大的场景。

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

    <table v-if="currentTable === 'table1'">
      <!-- 表格1内容 -->
    </table>

    <table v-show="currentTable === 'table2'">
      <!-- 表格2内容 -->
    </table>
  </div>
</template>

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

方法二：动态渲染表格数据

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

<template>
  <div>
    <button @click="currentData = data1">加载数据1</button>
    <button @click="currentData = data2">加载数据2</button>

    <table>
      <tr v-for="(item, index) in currentData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1: [{name: 'A', value: 1}, {name: 'B', value: 2}],
      data2: [{name: 'X', value: 10}, {name: 'Y', value: 20}],
      currentData: []
    }
  },
  created() {
    this.currentData = this.data1
  }
}
</script>

方法三：使用组件化实现表格切换

将不同表格封装为独立组件，通过动态组件切换。

<template>
  <div>
    <button @click="currentComponent = 'TableA'">表格A</button>
    <button @click="currentComponent = 'TableB'">表格B</button>

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

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

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

方法四：使用路由实现表格切换

适合作为独立页面切换的场景，通过 Vue Router 实现。

// router.js
const routes = [
  { path: '/table1', component: Table1 },
  { path: '/table2', component: Table2 }
]

方法五：使用选项卡(Tab)组件

结合 UI 框架如 Element UI 的 Tab 组件实现优雅切换。

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

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

性能优化建议

1. 频繁切换时优先使用 v-show 而非 v-if，避免重复渲染
2. 大数据量表格考虑使用虚拟滚动技术
3. 相同结构的表格建议复用 DOM 元素
4. 复杂表格可考虑使用专业表格组件如 ag-Grid 或 Handsontable

注意事项

1. 确保每个表格行有唯一的 key 属性
2. 切换时注意重置表格状态（如排序、分页）
3. 大量数据切换时考虑添加加载状态提示
4. 移动端需考虑触摸交互体验