<template>
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="Tab 1" name="tab1">Content of Tab 1</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">Content of Tab 2</el-tab-pane>
<el-tab-pane label="Tab 3" name="tab3">Content of Tab 3</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1'
};
},
methods: {
handleTabClick(tab) {
// 处理标签页点击事件
console.log(tab);
}
}
};
</script>
在这个例子中，<el-tabs> 包含了三个标签页，每个标签页通过 <el-tab-pane> 定义，其中 label 属性是标签页的标题，name 属性是标签页的唯一标识。v-model 绑定了当前选中的标签页，通过 @tab-click 监听了标签页的点击事件，触发 handleTabClick 方法。
你可以根据实际需求，调整 <el-tabs> 和 <el-tab-pane> 的属性来满足不同的样式和行为需求。详细的文档可以参考 Element Plus 的官方文档：[Tabs 标签页](https://element-plus.org/#/zh-CN/component/tabs)。
转载请注明出处：http://www.zyzy.cn/article/detail/5569/ElementPlus