基础的、简洁的标签页。

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

    显示代码

    选项卡样式

    选项卡样式的标签页。

    Tabs 标签页 - 图2

    只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

    1. <template>
    2.   <el-tabs v-model="activeName" type="card" @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: 'first'
    14.       };
    15.     },
    16.     methods: {
    17.       handleClick(tab, event) {
    18.         console.log(tab, event);
    19.       }
    20.     }
    21.   };
    22. </script>

    卡片化

    卡片化的标签页。

    将type设置为border-card。

    显示代码

    可以通过 tab-position 设置标签的位置

    Tabs 标签页 - 图4

    标签一共有四个方向的设置 tabPosition="left|right|top|bottom"

    1. <template>
    2.   <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
    3.     <el-radio-button label="top">top</el-radio-button>
    4.     <el-radio-button label="right">right</el-radio-button>
    5.     <el-radio-button label="bottom">bottom</el-radio-button>
    6.   </el-radio-group>
    9.     <el-tab-pane label="用户管理">用户管理</el-tab-pane>
    10.     <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    11.     <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    12.     <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    13.   </el-tabs>
    14. </template>
    15. <script>
    16.   export default {
    17.     data() {
    18.       return {
    19.         tabPosition: 'left'
    20.       };
    21.     }
    22.   };
    23. </script>

    自定义标签页

    可以通过具名 slot 来实现自定义标签页的内容

    显示代码

    动态增减标签页

    增减标签页按钮只能在选项卡样式的标签页下使用

    Tabs 标签页 - 图6

    1. <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
    2.   <el-tab-pane
    3.     :key="item.name"
    4.     v-for="(item, index) in editableTabs"
    5.     :label="item.title"
    6.     :name="item.name"
    7.   >
    8.     {{item.content}}
    9.   </el-tab-pane>
    10. </el-tabs>
    11. <script>
    12.   export default {
    13.     data() {
    14.       return {
    15.         editableTabsValue: '2',
    16.         editableTabs: [{
    17.           title: 'Tab 1',
    18.           name: '1',
    19.           content: 'Tab 1 content'
    21.           name: '2',
    22.           content: 'Tab 2 content'
    23.         }],
    24.         tabIndex: 2
    25.       }
    26.     },
    27.     methods: {
    28.       handleTabsEdit(targetName, action) {
    29.         if (action === 'add') {
    30.           let newTabName = ++this.tabIndex + '';
    31.           this.editableTabs.push({
    32.             title: 'New Tab',
    33.             name: newTabName,
    34.             content: 'New Tab content'
    35.           });
    36.           this.editableTabsValue = newTabName;
    37.         }
    38.         if (action === 'remove') {
    39.           let tabs = this.editableTabs;
    40.           let activeName = this.editableTabsValue;
    41.           if (activeName === targetName) {
    42.             tabs.forEach((tab, index) => {
    43.               if (tab.name === targetName) {
    44.                 let nextTab = tabs[index + 1] || tabs[index - 1];
    45.                 if (nextTab) {
    46.                   activeName = nextTab.name;
    47.                 }
    48.               }
    49.             });
    50.           }
    52.           this.editableTabsValue = activeName;
    53.           this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    54.         }
    55.       }
    56.     }
    57. </script>

    显示代码

    Tabs Attributes

    Tabs Events