###
ElementUI Tabs组件切换事件名称
ElementUI 的 `el-
tabs`
组件提供了用于监听标签页
切换的事件，该事件名称为 `tab-click`[^1]。当用户点击标签页
时，会触发此事件，并将当前选中的标签页作为参数传递给事件处理函数。
以下是 `tab-click` 事件的基本用法示例：
```vue
<template>
<el-
tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="用户管理" name="user">用户管理内容</el-tab-pane>
<el-tab-pane label="配置管理" name="config">配置管理内容</el-tab-pane>
<el-tab-pane label="角色管理" name="role">角色管理内容</el-tab-pane>
</el-
tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'user'
};
},
methods: {
handleTabClick(tab) {
console.log('当前选中的标签页:', tab.name);
}
}
};
</script>
```
在上述代码中，`@tab-click="handleTabClick"` 定义了标签页
切换时的事件处理函数，`handleTabClick` 方法接收一个参数 `tab`，它包含了当前选中标签页的相关信息，例如 `name` 和索引等属性。
此外，在某些场景下，如果需要通过按钮或其他方式控制标签页的
切换，可以使用 `v-model` 双向绑定当前激活的标签页名称或索引值，并通过修改该值来实现手动
切换。
### 注意事项
在使用 `el-
tabs`
组件时，如果页面中包含动态加载的内容（如
ECharts 图表），需要注意
切换标签页后可能引发图表尺寸异常的
问题[^4]。为解决这一
问题，可以在
切换事件中调用
ECharts 实例的 `resize` 方法以重新调整图表大小。
### 示例代码：解决
ECharts 尺寸异常
```vue
<template>
<el-
tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane label="电流" name="first">
<div ref="chart"></div>
</el-tab-pane>
<el-tab-pane label="电压" name="second">
<div ref="chart2"></div>
</el-tab-pane>
</el-
tabs>
</template>
<script>
import * as
echarts from '
echarts';
export default {
data() {
return {
activeName: 'first',
chartInstance: null,
chartInstance2: null
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
this.chartInstance =
echarts.init(this.$refs.chart);
this.chartInstance.setOption({
series: [{ type: 'line', data: [1, 2, 3] }]
});
this.chartInstance2 =
echarts.init(this.$refs.chart2);
this.chartInstance2.setOption({
series: [{ type: 'line', data: [4, 5, 6] }]
});
},
handleTabClick() {
if (this.activeName === 'first' && this.chartInstance) {
this.chartInstance.resize();
} else if (this.activeName === 'second' && this.chartInstance2) {
this.chartInstance2.resize();
}
}
}
};
</script>
```
博客内容提及添加定时器setTimeOut，使用方式为setTimeOut(() => {}, 0)，这是前端开发中常用的设置定时任务的方法。
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
