elementui标签页

Element UI 是一套基于 Vue.js 的桌面端组件库，它提供了丰富的UI组件，其中包括标签页（Tabs）组件。

在 Element UI 中使用标签页组件，你需要先安装 Element UI，并在你的项目中引入相应的样式和组件。

首先，在你的项目中安装 Element UI：

npm install element-ui

然后，在你的入口文件（通常是 `main.js`）中引入 Element UI 的样式和组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

现在，你就可以在你的 Vue 组件中使用标签页组件了。例如，你可以在一个页面上创建多个标签页，并在每个标签页中放置不同的内容。

下面是一个简单的示例代码：

<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'
    };
  }
};
</script>

这个示例中，我们使用了 `el-tabs` 组件来创建标签页，每个标签页使用 `el-tab-pane` 组件表示。通过 `v-model` 来绑定当前选中的标签页，可以通过修改 `activeTab` 的值来切换标签页。

这就是使用 Element UI 的标签页组件的基本用法。你可以根据自己的需求来进一步定制样式和功能。更多详细的使用文档和示例可以参考 Element UI 的官方文档。