Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

 1 <template>
 2   <el-tabs v-model="activeName" @tab-click="handleClick">
 3     <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
 4     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
 5     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
 6     <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
 7   </el-tabs>
 8 </template>
 9 <script>
10   export default {
11     data() {
12       return {
13         activeName: 'second'
14       };
15     },
16     methods: {
17       handleClick(tab, event) {
18         console.log(tab, event);
19       }
20     }
21   };
22 </script>

View Code