element plus tabs 用法在 Element Plus 中，Tabs 组件用于显示多个标签页，并在这些标签页之间切换内容。以下是一个简单的示例演示 Element Plus Tabs 组件的基本用法：
安装 Element Plus：
确保你的项目中已经安装了 Element Plus。如果没有安装，可以通过以下命令进行安装：
bash
Copy code
npm install element-plus
在你的项目中引入 Element Plus：
在你的项目中引入 Element Plus 的样式和组件。你可以在你的入口文件（比如 main.js）中添加以下代码：
javascript
Copy code
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.use(ElementPlus);
使用 Tabs 组件：
在你的组件中使用 Tabs 组件，以下是一个简单的示例：
vue
Copy code
<template>
<div>
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="Tab 1" name="tab1">
<p>Content of Tab 1</p>
</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">
<p>Content of Tab 2</p>
</el-tab-pane>
<el-tab-pane label="Tab 3" name="tab3">
<p>Content of Tab 3</p>
</el-tab-pane>
pane
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
};
},
methods: {
handleTabClick(tab) {
console.log(`Tab ${tab.index + 1} clicked`);
},
},
};
</script>
在这个示例中，<el-tabs> 包含多个 <el-tab-pane>，每个 <el-tab-pane> 表示一个标签页。可以通过 v-model 绑定 activeTab 来实现当前选中的标签页。@tab-click 事件监听标签页点击事件。
这只是 Element Plus Tabs 组件的基本用法，你可以根据你的实际需求使用更多的配置项和功能，比如动态生成标签页、禁用标签页等。