ElementUI浅尝辄止31：Tabs 标签页

选项卡组件：分隔内容上有关联但属于不同类别的数据集合。

常见于网站内容信息分类或app内容信息tab分类

1.如何使用？

Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

<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: 'second'};},methods: {handleClick(tab, event) {console.log(tab, event);}}};
</script>

2.选项卡样式

选项卡样式的标签页。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。<template><el-tabs v-model="activeName" 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>

3.卡片化

卡片化的标签页。

将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>

4.选项卡位置调整

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

标签一共有四个方向的设置 tabPosition="left|right|top|bottom"<template><el-radio-group v-model="tabPosition" style="margin-bottom: 30px;"><el-radio-button label="top">top</el-radio-button><el-radio-button label="right">right</el-radio-button><el-radio-button label="bottom">bottom</el-radio-button><el-radio-button label="left">left</el-radio-button></el-radio-group><el-tabs :tab-position="tabPosition" style="height: 200px;"><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 {data() {return {tabPosition: 'left'};}};
</script>

5.自定义标签页

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

<el-tabs type="border-card"><el-tab-pane><span slot="label"><i class="el-icon-date"></i> 我的行程</span>我的行程</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>

6.动态增减标签页

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

<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"><el-tab-pane:key="item.name"v-for="(item, index) in editableTabs":label="item.title":name="item.name">{{item.content}}</el-tab-pane>
</el-tabs>
<script>export default {data() {return {editableTabsValue: '2',editableTabs: [{title: 'Tab 1',name: '1',content: 'Tab 1 content'}, {title: 'Tab 2',name: '2',content: 'Tab 2 content'}],tabIndex: 2}},methods: {handleTabsEdit(targetName, action) {if (action === 'add') {let newTabName = ++this.tabIndex + '';this.editableTabs.push({title: 'New Tab',name: newTabName,content: 'New Tab content'});this.editableTabsValue = newTabName;}if (action === 'remove') {let tabs = this.editableTabs;let activeName = this.editableTabsValue;if (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {let nextTab = tabs[index + 1] || tabs[index - 1];if (nextTab) {activeName = nextTab.name;}}});}this.editableTabsValue = activeName;this.editableTabs = tabs.filter(tab => tab.name !== targetName);}}}}
</script>

 7.自定义增加标签页触发器

<div style="margin-bottom: 20px;"><el-buttonsize="small"@click="addTab(editableTabsValue)">add tab</el-button>
</div>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"><el-tab-panev-for="(item, index) in editableTabs":key="item.name":label="item.title":name="item.name">{{item.content}}</el-tab-pane>
</el-tabs>
<script>export default {data() {return {editableTabsValue: '2',editableTabs: [{title: 'Tab 1',name: '1',content: 'Tab 1 content'}, {title: 'Tab 2',name: '2',content: 'Tab 2 content'}],tabIndex: 2}},methods: {addTab(targetName) {let newTabName = ++this.tabIndex + '';this.editableTabs.push({title: 'New Tab',name: newTabName,content: 'New Tab content'});this.editableTabsValue = newTabName;},removeTab(targetName) {let tabs = this.editableTabs;let activeName = this.editableTabsValue;if (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {let nextTab = tabs[index + 1] || tabs[index - 1];if (nextTab) {activeName = nextTab.name;}}});}this.editableTabsValue = activeName;this.editableTabs = tabs.filter(tab => tab.name !== targetName);}}}
</script>