vue3/Element/Tabs 标签页的使用与详解
1. 引入 Element Plus
首先，在你的 Vue 组件中引入所需的组件：
<template>
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<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>
</template>
<script setup>
import { ref } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';
const activeTab = ref('first');
const handleTabClick = (tab, event) => {
console.log(tab, event);
};
</script>
<style>
/* 样式按需添加 */
</style>2. 组件解释
<el-tabs>：标签页容器，通过v-model绑定当前激活的标签页的name。<el-tab-pane>：表示单个标签页的内容区域，label属性定义了显示的标签文本，name属性用于唯一标识一个标签页。- label属性是标签的名称
- name是标签的识别名
- 定义activeTab变量为first，绑定默认选项的name
- @tab-click="handleTabClick"选中标签触发的点击事件，可自定义函数内容
- 标签内为要展示的页面内容，可以在本页写也可以引用组件道显示区域。（包含自定义组件）