el-tabs选项卡点击事件（Element UI）

转载已于 2022-06-07 09:41:22 修改 · 2.2w 阅读

22 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/xuaner8786/article/details/80112138

文章标签：

#el-tabs选项卡点击事件 #Element #选项卡

于 2021-12-11 15:04:28 首次发布

本文通过一个Vue.js代码示例展示了如何使用`<el-tabs>`组件实现标签页切换，并在点击不同标签页时触发相应的事件处理函数。示例中，当用户点击'配置管理'标签时，会触发'配置管理'事件，反之则触发'用户管理'事件。代码详细解释了事件绑定和处理过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>
	export default {
		data() {
			return {
				activeName: 'second'
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
				if (tab.name == 'second') {
					// 触发‘配置管理’事件
					this.second();
				} else {
					// 触发‘用户管理’事件
					this.first();
				}
			},
			/**
			 * 触发‘用户管理’事件
			 */
			first() {
				console.log('我是用户管理');
			},
			/**
			 * 触发‘配置管理’事件
			 */
			second() {
				console.log('我是配置管理');
			}
		}
	};
</script>