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"选中标签触发的点击事件，可自定义函数内容
• 标签内为要展示的页面内容，可以在本页写也可以引用组件道显示区域。（包含自定义组件）