• Tabs 标签页
    • 基础用法
    • 选项卡样式
    • 卡片化
    • 位置
    • 自定义标签页
    • 动态增减标签页
    • 自定义增加标签页触发器
    • Tabs Attributes
    • Tabs Events
    • Tab-pane Attributes

    Tabs 标签页

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

    基础用法

    基础的、简洁的标签页。

    Tabs 标签页 - 图1

    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>

    选项卡样式

    选项卡样式的标签页。

    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>

    卡片化

    卡片化的标签页。

    Tabs 标签页 - 图3

    type设置为border-card

    1. <el-tabs type="border-card">
    2. <el-tab-pane label="用户管理">用户管理</el-tab-pane>
    3. <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    4. <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    5. <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    6. </el-tabs>

    位置

    可以通过 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-button label="left">left</el-radio-button>
    7. </el-radio-group>
    8. <el-tabs :tab-position="tabPosition" style="height: 200px;">
    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 标签页 - 图5

    1. <el-tabs type="border-card">
    2. <el-tab-pane>
    3. <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
    4. 我的行程
    5. </el-tab-pane>
    6. <el-tab-pane label="消息中心">消息中心</el-tab-pane>
    7. <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    8. <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    9. </el-tabs>

    动态增减标签页

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

    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'
    20. }, {
    21. title: 'Tab 2',
    22. name: '2',
    23. content: 'Tab 2 content'
    24. }],
    25. tabIndex: 2
    26. }
    27. },
    28. methods: {
    29. handleTabsEdit(targetName, action) {
    30. if (action === 'add') {
    31. let newTabName = ++this.tabIndex + '';
    32. this.editableTabs.push({
    33. title: 'New Tab',
    34. name: newTabName,
    35. content: 'New Tab content'
    36. });
    37. this.editableTabsValue = newTabName;
    38. }
    39. if (action === 'remove') {
    40. let tabs = this.editableTabs;
    41. let activeName = this.editableTabsValue;
    42. if (activeName === targetName) {
    43. tabs.forEach((tab, index) => {
    44. if (tab.name === targetName) {
    45. let nextTab = tabs[index + 1] || tabs[index - 1];
    46. if (nextTab) {
    47. activeName = nextTab.name;
    48. }
    49. }
    50. });
    51. }
    52. this.editableTabsValue = activeName;
    53. this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    54. }
    55. }
    56. }
    57. }
    58. </script>

    自定义增加标签页触发器

    Tabs 标签页 - 图7

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

    Tabs Attributes

    参数说明类型可选值默认值
    value / v-model绑定值,选中选项卡的 namestring第一个选项卡的 name
    type风格类型stringcard/border-card
    closable标签是否可关闭booleanfalse
    addable标签是否可增加booleanfalse
    editable标签是否同时可增加和关闭booleanfalse
    tab-position选项卡所在位置stringtop/right/bottom/lefttop
    stretch标签的宽度是否自撑开boolean-false
    before-leave切换标签之前的钩子,若返回 false 或者返回 Promise 且被 reject,则阻止切换。Function(activeName, oldActiveName)

    Tabs Events

    事件名称说明回调参数
    tab-clicktab 被选中时触发被选中的标签 tab 实例
    tab-remove点击 tab 移除按钮后触发被删除的标签的 name
    tab-add点击 tabs 的新增按钮后触发
    edit点击 tabs 的新增按钮或 tab 被关闭后触发(targetName, action)

    Tab-pane Attributes

    参数说明类型可选值默认值
    label选项卡标题string
    disabled是否禁用booleanfalse
    name与选项卡绑定值 value 对应的标识符,表示选项卡别名string该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1'
    closable标签是否可关闭booleanfalse
    lazy标签是否延迟渲染booleanfalse