使用 element-ui 中制作Tab切换 俩个来回切换表格

你可以使用 element-ui 中的 Tabs 组件来实现 Tab 切换功能。具体步骤如下：

1. 首先，需要引入 Tabs 和 TabPane 组件：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="表格1" name="table1">
      <!-- 表格1的内容 -->
    </el-tab-pane>
    <el-tab-pane label="表格2" name="table2">
      <!-- 表格2的内容 -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import { Tabs, TabPane } from 'element-ui'

  export default {
    components: {
      [Tabs.name]: Tabs,
      [TabPane.name]: TabPane
    },
    data () {
      return {
        activeName: 'table1'
      }
    },
    methods: {
      handleClick (tab) {
        console.log('点击了', tab.label)
      }
    }
  }
</script>

2. 在组件中使用 Tabs 和 TabPane 组件，并设置 label 和 name 属性，用于显示 Tab 的名称和标识。

3. 在 data 中定义 activeName 变量，用于记录当前激活的 Tab 的 name 值。

4. 在 Tabs 组件中使用 v-model 指令，将 activeName 绑定到 Tabs 组件上，实现 Tab 切换时自动更新 activeName 值。

5. 在 Tabs 组件上使用 @tab-click 事件监听器，监听 Tab 的点击事件，并在方法中实现对应的逻辑。

6. 在 TabPane 中编写对应的表格内容。

这样，你就可以实现一个简单的 Tab 切换组件了。如果需要在 Tab 切换时切换不同的表格内容，你可以在 handleClick 方法中根据 activeName 值来判断要显示的表格内容。