mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-05 21:58:49 +08:00
4.4 KiB
4.4 KiB
Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
基础用法
基础的、简洁的标签页。
:::demo Tabs 组件提供了选项卡功能,只需要使用el-tabs
和子元素el-tab-pane
即可,在两个元素中,我们分别提供了一系列的属性来方便使用,el-tab-pane
中label
决定了选项卡标题,标签内部写入内容即可。在下例中我们在el-tabs
中设置了active-name
属性,接受一个String
值,表明选中的选项卡,在el-tab-pane
中可以设置对应的name
属性,如果没有设置name
,则默认值为顺序的1
/2
/3
/4
。例子选中选项卡2,如果不设置name
,将active-name
设为2
,可以达成相同效果。
<template>
<el-tabs :active-name="activeName">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first'
};
}
};
</script>
:::
选项卡样式
选项卡样式的标签页。
:::demo 只需要设置type
属性即可,如果需要标签风格,将其设置为card
。
<template>
<el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
methods: {
handleRemove(tab) {
console.log(tab);
},
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
:::
可关闭
可以关闭标签页。
:::demo 在el-tabs
中设置closable
属性,接受一个Boolean
,设置为true
时为可关闭。
<template>
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
methods: {
handleRemove(tab) {
console.log(tab);
},
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
:::
卡片化
卡片化的标签页。
:::demo 将type
设置为border-card
。
<el-tabs type="border-card">
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>
:::
Tabs Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 风格类型 | string | card/border-card | — |
closable | 标签是否可关闭 | boolean | — | false |
active-name | 选中选项卡的 name | string | — | 第一个选项卡的 name |
Tabs Events
事件名称 | 说明 | 回调参数 |
---|---|---|
tab-click | tab 被选中的钩子 | 被选中的标签 tab 实例 |
tab-remove | tab 被删除的钩子 | 被删除的标签 tab 实例 |
Tab-pane Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 选项卡标题 | string | — | — |
name | 与选项卡 activeName 对应的标识符,表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1' |