使用 element-ui 中实现Tab切换 可以切换内容 可以修改样式

是的，element-ui提供了Tab组件来实现Tab切换。你可以自定义Tab的样式，并且可以在每个Tab下面添加不同的内容。

以下是一个简单的例子，展示了如何在element-ui中实现Tab切换。

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Tab 1" name="tab1">
        <p>This is Tab 1 content.</p>
      </el-tab-pane>
      <el-tab-pane label="Tab 2" name="tab2">
        <p>This is Tab 2 content.</p>
      </el-tab-pane>
      <el-tab-pane label="Tab 3" name="tab3">
        <p>This is Tab 3 content.</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'tab1'
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>

<style scoped>
  /* 自定义样式 */
  .el-tabs__header {
    background-color: #f0f0f0;
  }
  .el-tabs__item {
    color: #666;
  }
  .el-tabs__active-bar {
    height: 3px;
    background-color: #409EFF;
  }
</style>

在上面的示例中，我们使用`<el-tabs>`来创建Tab组件，`v-model`指令绑定了当前选中的Tab的`name`属性，`@tab-click`监听Tab的点击事件。

在每个`<el-tab-pane>`中，我们可以添加不同的内容，并且可以使用`label`属性来设置Tab的名称，`name`属性来设置唯一标识符。

最后，我们在`<style>`中定义了一些自定义样式，例如修改Tab头部的背景色、Tab项的文字颜色以及激活状态下的下划线颜色。

你可以根据自己的需求，进一步修改样式以及添加更多的Tab项和内容。