当前位置：首页 > VUE

vue怎么实现table切换

2026-02-21 03:14:55VUE

实现 Vue 中表格切换功能

使用动态组件切换表格

通过 Vue 的 component 动态组件实现表格切换，结合 :is 属性绑定当前显示的表格组件。

<template>
  <div>
    <button @click="currentTable = 'TableA'">显示表格A</button>
    <button @click="currentTable = 'TableB'">显示表格B</button>
    <component :is="currentTable" />
  </div>
</template>

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

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

使用条件渲染切换表格

利用 v-if 和 v-else 指令根据条件显示不同的表格组件。

<template>
  <div>
    <button @click="showTableA = true">显示表格A</button>
    <button @click="showTableA = false">显示表格B</button>
    <TableA v-if="showTableA" />
    <TableB v-else />
  </div>
</template>

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

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

使用路由切换表格

在 Vue Router 中配置不同路由对应不同表格组件，通过导航切换。

// router.js
import TableA from './views/TableA.vue'
import TableB from './views/TableB.vue'

const routes = [
  { path: '/table-a', component: TableA },
  { path: '/table-b', component: TableB }
]

<!-- App.vue -->
<template>
  <div>
    <router-link to="/table-a">表格A</router-link>
    <router-link to="/table-b">表格B</router-link>
    <router-view></router-view>
  </div>
</template>

使用同一组件切换数据源

通过改变数据源实现同一表格组件显示不同内容。

<template>
  <div>
    <button @click="loadData('dataA')">加载数据A</button>
    <button @click="loadData('dataB')">加载数据B</button>
    <table>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dataSources: {
        dataA: [{name: 'A1', value: 1}, {name: 'A2', value: 2}],
        dataB: [{name: 'B1', value: 3}, {name: 'B2', value: 4}]
      }
    }
  },
  methods: {
    loadData(source) {
      this.tableData = this.dataSources[source]
    }
  }
}
</script>

使用选项卡组件切换表格

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

vue怎么实现table切换

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="表格A" name="tableA">
      <TableA />
    </el-tab-pane>
    <el-tab-pane label="表格B" name="tableB">
      <TableB />
    </el-tab-pane>
  </el-tabs>
</template>

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

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