vue中table切换

在Vue中实现table切换，可以使用条件渲染和computed属性来实现。具体的实现步骤如下：

1. 在data中定义一个变量，用于表示当前需要显示的表格类型。例如：currentTableType: 'table1'

2. 在页面中使用条件渲染，根据currentTableType的值来决定显示哪个表格。例如：

<template>
  <div>
    <button @click="currentTableType = 'table1'">表格1</button>
    <button @click="currentTableType = 'table2'">表格2</button>
    <table v-if="currentTableType === 'table1'">
      <!-- 表格1的内容 -->
    </table>
    <table v-if="currentTableType === 'table2'">
      <!-- 表格2的内容 -->
    </table>
  </div>
</template>

3. 如果有多个表格，可以使用computed属性来简化代码。例如：

<template>
  <div>
    <button @click="currentTableType = 'table1'">表格1</button>
    <button @click="currentTableType = 'table2'">表格2</button>
    <table v-for="(table, index) in tables" :key="index" v-if="currentTableType === table.type">
      <!-- 表格的内容 -->
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTableType: 'table1',
      tables: [
        { type: 'table1', data: [...] },
        { type: 'table2', data: [...] },
        ...
      ]
    }
  },
  computed: {
    currentTable() {
      return this.tables.find(table => table.type === this.currentTableType)
    }
  }
}
</script>

这样，就可以根据currentTableType的值来动态显示表格了。