elementui的tab效果

Element UI 是一套基于 Vue.js 的开源组件库，它提供了丰富的 UI 组件和工具，可以帮助开发者快速构建现代化的 web 应用。关于 Tab 效果，Element UI 也提供了相应的组件。

在 Element UI 中，可以使用 `<el-tabs>` 和 `<el-tab-pane>` 组件来实现 Tab 切换效果。下面是一个简单的示例代码：

<template>
  <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>
</template>

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

在上述代码中，`<el-tabs>` 组件是一个选项卡容器，通过 `v-model` 属性绑定一个变量来控制当前选中的 tab。每个 `<el-tab-pane>` 组件则代表一个选项卡，可以设置标签名称和对应的内容。

通过这样的结构，就可以实现基本的 Tab 切换效果了。当用户点击不同的选项卡时，`activeTab` 变量会自动更新，从而触发视图的更新。

需要注意的是，以上代码只是一个简单示例，Element UI 还提供了更多丰富的配置选项和样式定制。你可以根据自己的需求进一步调整和扩展 Tab 组件的功能。