1. docs
sss
  • docs
    • docs
      • EleProLayout 高级布局组件使用文档
      • Markdown - ByteMdEditor
      • 下拉菜单 - EleDropdown
      • 主题功能
      • 二维码 - EleQrcode
      • 全局配置 - EleConfigProvider
      • 其他功能
      • 分段器 - EleSegmented
      • 分页组件 - ElePagination
      • 加载中 - EleLoading
      • 包裹组件 - EleApp
      • 卡片组件 - EleCard
      • 可选卡片 - EleCheckCard
      • 图标选择 - EleIconSelect
      • 富文本 - TinymceEditor
      • 导航菜单 - EleMenus
      • 工具方法与表单数据操作文档
      • 抽屉组件 - EleDrawer
      • 文字提示 - EleTooltip
      • 文本组件 - EleText
      • 标签输入 - EleEditTag
      • 标签页 - EleTabs
      • 树下拉 - EleTreeSelect
      • 步骤条 - EleSteps
      • 气泡确认框 - ElePopconfirm
      • 消息提示 - EleMessage
      • 统计图表 - VueEcharts
      • 表格下拉 - EleTableSelect
      • 表格组件 - EleDataTable
      • 警告提示 - EleAlert
      • 页面容器 - ElePage
      • 高级弹窗 - EleModal
      • 高级表格 - EleProTable
  1. docs

标签页 - EleTabs

5.10.1.快速使用
标签页组件是对 ElTabs 的扩展,增加了尺寸控制以及更多的风格等,使用示例:

运行代码 新窗口打开
5.10.2.属性列表
支持 ElTabs 的全部属性(请查看 Element 文档),这里只列出额外增加的属性:
  items 同样支持 ElTabPane 组件的全部属性,还增加了 slot 属性(String类型, v1.1.4新增)配置插槽名称以及 meta 属性(任意类型)存放额外数据, 设计 meta 属性是因为整个 item 会 v-bind 给 ElTabPane , 有时想为 item 附加更多的数据想在插槽渲染的时候拿到, 此时就可以把额外的数据放在 meta 中,因为这些数据不能绑给 ElTabPane 组件,而 slot 和 meta 两个字段会在 v-bind 时排除。
simple 风格是默认风格只去掉了分割线,比如在卡片的 header 里面使用时就不想要分割线,因为卡片 header 也有分割线。
使用 contextMenus 属性配置右键菜单示例(v1.1.0新增),可以为数组或方法返回 EleDropdown 组件的 items 属性:

运行代码 新窗口打开
例如实现内部表格高度铺满,还可以结合 ElePage 和 EleCard 以及 EleSplitPanel 一起用,示例:

<template #role>






运行代码 新窗口打开
如果选项卡内容不仅是表格,还需要有更深的层次结构可以继续配合 ElePage 组件使用,示例:

运行代码 新窗口打开
5.10.3.事件列表
支持 ElTabs 的全部事件(请查看 Element 文档),这里只列出额外增加的事件:
5.10.4.插槽列表
使用 label 插槽自定义页签标题,例如增加图标和徽章

运行代码 新窗口打开
(v1.2.1移除)使用 contextMenu 插槽自定义页签标题鼠标右键菜单示例(v1.1.0开始通过属性配置见前面属性章节):

修改于 2025-12-20 03:37:01
上一页
标签输入 - EleEditTag
下一页
树下拉 - EleTreeSelect
Built with