elementui tabs
Element UI Tabs 组件使用指南
Element UI 提供了一套功能丰富的 Tabs 组件，用于在页面中展示多个内容区域，并通过标签页进行切换。
基本用法
<el-tabs v-model="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-tabs>
<script>
export default {
data() {
return {
activeName: 'first'
}
}
}
</script>卡片样式
通过设置 type 属性为 card 可以改变标签页的样式：
<el-tabs v-model="activeName" type="card">
<!-- 标签页内容 -->
</el-tabs>可关闭标签页
添加 closable 属性使标签页可关闭：
<el-tabs v-model="activeName" type="card" closable>
<el-tab-pane
v-for="item in tabs"
:key="item.name"
:label="item.label"
:name="item.name"
>
{{ item.content }}
</el-tab-pane>
</el-tabs>自定义标签页
可以使用具名插槽 label 自定义标签内容：
<el-tabs>
<el-tab-pane>
<template #label>
<span><i class="el-icon-date"></i> 自定义标签</span>
</template>
自定义标签内容
</el-tab-pane>
</el-tabs>动态增减标签页
结合数组操作实现动态增减标签页：
methods: {
addTab() {
const newTabName = `newTab${this.tabs.length + 1}`
this.tabs.push({
label: `New Tab ${this.tabs.length + 1}`,
name: newTabName,
content: `New Tab content ${this.tabs.length + 1}`
})
this.activeName = newTabName
},
removeTab(targetName) {
const tabs = this.tabs
let activeName = this.activeName
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
this.activeName = activeName
this.tabs = tabs.filter(tab => tab.name !== targetName)
}
}禁用标签页
通过 disabled 属性禁用特定标签页：
<el-tab-pane label="禁用标签" name="disabled" disabled>禁用内容</el-tab-pane>位置设置
使用 tab-position 属性可以设置标签位置：
<el-tabs tab-position="left">
<!-- 标签页内容 -->
</el-tabs>事件处理
Tabs 组件提供多种事件：
<el-tabs
v-model="activeName"
@tab-click="handleClick"
@tab-remove="handleRemove"
>
<!-- 标签页内容 -->
</el-tabs>懒加载
设置 lazy 属性实现标签页内容的懒加载：
<el-tab-pane label="懒加载" name="lazy" :lazy="true">
懒加载内容
</el-tab-pane>
