Tabs 标签页

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

基础用法

基础的、简洁的标签页。

卡片风格的标签

你可以设置具有卡片风格的标签。

带有边框的卡片风格

你还可以设置标签页为带有边框的卡片

标签位置的设置

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

自定义标签页的内容

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

动态增减标签页

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

添加按钮自定义图标 2.4.0

增加标签页触发器自定义

Tabs 属性

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

Tabs 事件

事件名说明回调参数
tab-clicktab 被选中时触发(pane: TabsPaneContext, ev: Event)
tab-changeactiveName 改变时触发(name: TabPaneName)
tab-remove点击 tab 移除按钮时触发(name: TabPaneName)
tab-add点击 tab 新增按钮时触发—
edit点击 tab 的新增或移除按钮后触发(paneName: TabPaneName | undefined, action: 'remove' | 'add')

Tabs 插槽

插槽名说明子标签
-默认插槽Tab-pane
addIcon 2.4.0 deprecated自定义添加按钮图标-
add-icon 2.5.4自定义添加按钮图标-

Tab-pane 属性

属性名说明类型可选值默认值
label选项卡标题string——
disabled是否禁用boolean—false
name与选项卡绑定值 value 对应的标识符，表示选项卡别名string / number—该选项卡在选项卡列表中的序数值，第一个选项卡为 '0'
closable标签是否可关闭boolean—false
lazy标签是否延迟渲染boolean—false

Tab-pane 插槽

插槽名说明
-Tab-pane 的内容
labelTab-pane 的标题内容

源代码

组件 • 文档

贡献者