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