vue项目在一个页面实现不同标签切换不同table

在Vue项目中，你可以使用动态组件或条件渲染来实现不同标签切换不同表格的功能。下面是一个简单的示例：

• 创建表格组件：

<template>
  <div>
    <table v-if="showTable1" class="table1">
      <!-- Table 1 content -->
    </table>
    <table v-else-if="showTable2" class="table2">
      <!-- Table 2 content -->
    </table>
  </div>
</template>

<script>
export default {
  props: {
    showTable1: {
      type: Boolean,
      default: false
    },
    showTable2: {
      type: Boolean,
      default: false
    }
  }
}
</script>

• 在父组件中切换标签：

<template>
  <div>
    <button @click="showTable1 = !showTable1">切换表格1</button>
    <button @click="showTable2 = !showTable2">切换表格2</button>
    <TableComponent :showTable1="showTable1" :showTable2="showTable2"/>
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      showTable1: false,
      showTable2: false
    }
  }
}
</script>

在这个示例中，我们创建了一个名为TableComponent的组件，它会根据传入的showTable1和showTable2属性来动态显示不同的表格。在父组件中，我们通过按钮点击事件来切换这两个属性的状态，从而切换表格的显示和隐藏。

你可以根据自己的需求和表格内容进行进一步的定制和扩展。希望这个示例能帮助你实现不同标签切换不同表格的功能！