vue项目element ui tab切换

在Vue项目中使用Element UI实现Tab切换非常简单。首先，确保你已经安装了Vue和Element UI。

1. 在你的Vue组件中引入Element UI的Tab组件和样式：

import { TabPane, Tabs } from 'element-ui';
import 'element-ui/lib/theme-chalk/tab-pane.css';
import 'element-ui/lib/theme-chalk/tabs.css';

2. 在你的Vue组件中使用Tabs组件和TabPane组件：

<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="Tab 1" name="tab1">
        Content of Tab 1
      </el-tab-pane>
      <el-tab-pane label="Tab 2" name="tab2">
        Content of Tab 2
      </el-tab-pane>
      <el-tab-pane label="Tab 3" name="tab3">
        Content of Tab 3
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1' // 默认选中的Tab
    };
  }
};
</script>

在上面的例子中，我们使用了`el-tabs`组件来创建一个Tab容器，然后使用`el-tab-pane`组件来创建每个具体的Tab面板。通过`v-model`指令可以绑定当前选中的Tab。

这样就完成了基本的Tab切换效果。你可以根据需要自定义每个Tab的内容和样式。