On this page

tabs切换组件

Element Plus Tabs Documentation

Hidden Title

基础用法：<s-tabs :options="navList"></s-tabs>

属性事件插槽简介

基础用法

主题（theme 默认值：default）

尺寸

胶囊类型

胶囊类型内容过多

胶囊类型主题圆角

通常用法

Slots

Trigger `click|hover`

children `支持嵌套 el-tab-pane`

other

addRemove

位置

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

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

自定义高度

属性

属性名	说明	类型	默认值
`modelValue`	当前激活 tab，空字符串、`null` 或 `undefined` 表示不选中任何项	string / number / boolean / null	`''`
`options`	标签页配置	array	`[]`
`label`	标签标题字段名	string	`label`
`value`	标签值字段名	string	`value`
`subAttrs`	透传给 `el-tab-pane` 的属性	object	`{}`
`trigger`	切换触发方式，支持 `click` / `hover`	string	`click`
`type`	标签类型，支持 `capsule` 和 Element Plus 原生 `card` / `border-card` 等类型	string	按内部组件或 Element Plus 对应属性
`theme`	主题样式，支持 `default` / `chenghua` / `shijingshan` / `sybz`	`default` / `chenghua` / `shijingshan` / `sybz`	`default`
`size`	尺寸，支持 `small` / `default` / `large`	string	`default`
`width`	组件宽度，数字按 px 处理	string / number	`''`
`height`	组件高度，数字按 px 处理，也支持 `100%` 等 CSS 高度	string / number	`''`
`headerMargin`	页签头部外边距，数字按 px 处理，也支持完整 CSS margin	string / number	`undefined`

事件

事件名	说明
`update:modelValue`	当前激活 tab 变化时触发

插槽

插槽名	说明
`default`	自定义整个 tabs 内容
`${value}`	自定义每个 tab-pane 内容，名称为选项值
`${value}-label`	自定义每个 tab 标题区域