mirror of https://github.com/ElemeFE/element
207 lines
6.0 KiB
Markdown
207 lines
6.0 KiB
Markdown
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeName: 'first',
|
||
activeName2: 'first',
|
||
tabs: [{
|
||
title: 'Tab 1',
|
||
name: '1',
|
||
content: 'Tab 1 content'
|
||
}, {
|
||
title: 'Tab 2',
|
||
name: '2',
|
||
content: 'Tab 2 content'
|
||
}],
|
||
tabIndex: 2
|
||
}
|
||
},
|
||
methods: {
|
||
handleRemove(tab) {
|
||
console.log(tab);
|
||
},
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
},
|
||
renderTab(h, tab) {
|
||
return <span><i class="el-icon-date"></i> {tab.label}</span>;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
## Tabs 标签页
|
||
|
||
分隔内容上有关联但属于不同类别的数据集合。
|
||
|
||
### 基础用法
|
||
|
||
基础的、简洁的标签页。
|
||
|
||
:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。
|
||
|
||
```html
|
||
<template>
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<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'
|
||
};
|
||
},
|
||
methods: {
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### 选项卡样式
|
||
|
||
选项卡样式的标签页。
|
||
|
||
:::demo 只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。
|
||
|
||
```html
|
||
<template>
|
||
<el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
|
||
<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'
|
||
};
|
||
},
|
||
methods: {
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### 可关闭
|
||
|
||
可以关闭标签页。
|
||
|
||
:::demo 通过设置 `closable` 属性来打开 `Tabs` 的可关闭标签效果, `closable` 也可以设置在 `Tab Panel` 中实现部分标签页的可关闭效果。
|
||
|
||
```html
|
||
<template>
|
||
<el-tabs type="card" closable @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`。
|
||
```html
|
||
<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>
|
||
```
|
||
:::
|
||
|
||
### 自定义标签页
|
||
|
||
可以通过 `label-content` 属性来实现自定义标签页的内容
|
||
|
||
:::demo `label-content` 是一个 render function，在这个方法里返回的 vnode 会被渲染到标签页中。
|
||
```html
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="我的行程" :label-content="renderTab">我的行程</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>
|
||
<script>
|
||
export default {
|
||
methods: {
|
||
renderTab(h, tab) {
|
||
return <span><i class="el-icon-date"></i> {tab.label}</span>;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### 动态增加标签页
|
||
|
||
展示如何通过触发器来动态增加标签页
|
||
|
||
:::demo
|
||
```html
|
||
<div style="margin-bottom: 20px;">
|
||
<el-button size="small" @click="tabs.push({ name: 'Tab ' + ++tabIndex, title: 'new Tab', content: 'new Tab content' })">add tab</el-button>
|
||
</div>
|
||
<el-tabs type="card" closable>
|
||
<el-tab-pane v-for="(item, index) in tabs" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane>
|
||
</el-tabs>
|
||
```
|
||
:::
|
||
|
||
### Tabs Attributes
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| type | 风格类型 | string | card/border-card | — |
|
||
| closable | 标签是否可关闭 | boolean | — | false |
|
||
| active-name(deprecated) | 选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||
| value | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||
|
||
### Tabs Events
|
||
| 事件名称 | 说明 | 回调参数 |
|
||
|---------- |-------- |---------- |
|
||
| tab-click | tab 被选中的钩子 | 被选中的标签 tab 实例 |
|
||
| tab-remove | tab 被删除的钩子 | 被删除的标签 tab 实例 |
|
||
|
||
### Tab-pane Attributes
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| label | 选项卡标题 | string | — | — |
|
||
| label-content | 选项卡的标题的渲染 Function | Function(h, tab:vueInstance) | - | - |
|
||
| disabled | 是否禁用 | boolean | - | false |
|
||
| name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
|
||
| closable | 标签是否可关闭 | boolean | — | false |
|