在 Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）中，Tabs 标签页组件通常被称为 el-tabs。虽然两个版本在 API 和实现上可能有一些细微的差别，但基本概念和用法是相似的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用 el-tabs 组件。
Vue 2 + Element UI
在 Vue 2 的 Element UI 中，el-tabs 组件用于创建标签页。
属性（Props）
v-model或value：绑定当前激活标签页的 name。type：标签页的类型，可选值为border-card（带边框的卡片风格）或card（卡片风格）。closable：标签是否可关闭。addable：标签是否可增加。editable：标签是否同时可增删。tab-click：标签被点击时的触发方式，可选值为prev（只触发前一个标签）、next（只触发后一个标签）或both（前后都触发）。tab-position：标签的位置，可选值为top、right、bottom、left。stretch：是否拉伸标签页填满整个容器。before-remove：关闭前的钩子，若返回false或者返回 Promise 且被 reject，则阻止关闭。
事件（Events）
tab-click：标签被点击时触发。tab-remove：标签被关闭时触发。tab-add：标签被添加时触发（仅在addable或editable为true时有效）。tab-edit：标签被编辑时触发（仅在editable为true时有效）。
示例
<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>
Vue 3 + Element Plus
在 Vue 3 的 Element Plus 中，el-tabs 组件的用法与 Vue 2 的 Element UI 类似，但可能会有一些 API 变动和新增功能。
属性（Props）和事件（Events）
Element Plus 的 el-tabs 组件的大部分属性和事件与 Element UI 保持一致，但可能会有一些细微的差别或新增的属性/事件。由于 Element Plus 的更新迭代，建议参考官方文档以获取最新的属性和事件列表。
示例（假设与 Element UI 类似）
<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-tabs>
</template><script setup>
import { ref } from 'vue';const activeName = ref('first');function handleClick(tab, event) {console.log(tab, event);
}
</script>
注意：由于 Element Plus 还在不断发展中，具体的 API 和使用方法可能会有所不同。务必参考 Element Plus 的官方文档以获取最准确的信息和示例代码。同时，Vue 3 的 Composition API（如 setup、ref 等）在示例中有所体现，这也是 Vue 3 相较于 Vue 2 的一个主要变化。
)
