使用 element-ui 中实现Tab点击切换内容，可以效果样式 可以实现点击切换效果

是的，使用 element-ui 中的 Tabs 组件可以很方便地实现 Tab 点击切换内容的效果，并且也可以自定义样式。

首先，在需要使用 Tabs 组件的页面中引入 Tabs 组件：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
    <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
    <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
  </el-tabs>
</template>

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

export default {
  components: {
    'el-tabs': Tabs,
    'el-tab-pane': TabPane
  },
  data() {
    return {
      activeTab: 'Tab 1'
    }
  }
}
</script>

在上面的示例中，我们使用了 `el-tabs` 和 `el-tab-pane` 组件来创建 Tabs，并且使用 `v-model` 指令来绑定当前选中的 Tab。Tabs 中的每个 Tab 都由 `el-tab-pane` 组件来表示，它们的 `label` 属性用来设置 Tab 的显示名称，而标签对之间的内容则是 Tab 的内容。

可以在 `el-tabs` 组件上添加 `type` 属性来设置 Tab 的类型，比如 `card` 表示卡片式的 Tab，`border-card` 表示带边框的卡片式 Tab 等等。

<template>
  <el-tabs v-model="activeTab" type="card">
    <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
    <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
    <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
  </el-tabs>
</template>

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

export default {
  components: {
    'el-tabs': Tabs,
    'el-tab-pane': TabPane
  },
  data() {
    return {
      activeTab: 'Tab 1'
    }
  }
}
</script>

除此之外，我们也可以自定义 Tab 的样式，比如设置 Tab 的背景色、文字颜色、边框等等：

<template>
  <el-tabs v-model="activeTab" class="custom-tab">
    <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
    <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
    <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
  </el-tabs>
</template>

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

export default {
  components: {
    'el-tabs': Tabs,
    'el-tab-pane': TabPane
  },
  data() {
    return {
      activeTab: 'Tab 1'
    }
  }
}
</script>

<style scoped>
.custom-tab .el-tabs__header {
  background-color: #f2f2f2;
  border-radius: 4px;
}

.custom-tab .el-tabs__item.is-active {
  color: #fff;
  background-color: #409EFF;
  border-color: #409EFF;
}

.custom-tab .el-tabs__item {
  color: #606266;
  border-color: #dcdfe6;
}
</style>

在上面的示例中，我们为 `el-tabs` 组件添加了一个名为 `custom-tab` 的 class，然后在样式表中设置了该 class 下的 Tab 的样式。这样就可以实现自定义样式的效果了。