点击el-tabs切换事件
时间: 2023-07-26 12:08:14 浏览: 249
手动动态改变el-tabs标签页顺序
在 Element UI 中,el-tabs 组件提供了一个 @tab-click 事件来监听切换标签页的操作。你可以在 el-tabs 上绑定这个事件,然后在回调函数中获取当前切换到的标签页的信息。
下面是一个示例代码:
```html
<template>
<el-tabs @tab-click="handleTabClick">
<el-tab-pane label="标签页1">标签页1内容</el-tab-pane>
<el-tab-pane label="标签页2">标签页2内容</el-tab-pane>
<el-tab-pane label="标签页3">标签页3内容</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
methods: {
handleTabClick(tab) {
console.log(`切换到了标签页 ${tab.label}`)
}
}
}
</script>
```
在上面的代码中,我们在 el-tabs 上绑定了 @tab-click 事件,并且将它的回调函数设置为 handleTabClick。在这个函数中,我们通过参数 tab 获取到了当前切换到的标签页的信息,包括它的 label 和 index。在这里,我们只是简单地将这些信息输出到控制台上,你可以根据自己的需求来处理这些信息。
阅读全文