el-tab-pane标签怎么怎么监听当前在哪个tab
时间: 2024-10-20 20:03:04 浏览: 31
在Element UI库中的`el-tabs`组件中,如果你想监听当前激活的`tab-pane`(tabpanel),你可以使用`v-model`绑定的值变化事件`$emit`或者`@current-change`自定义事件。
下面是一个基本的例子:
```html
<template>
<el-tabs v-model="activeName">
<el-tab-pane :label="item.name" v-for="(item, index) in items" :key="index" @current-change="handleTabChange">
{{ item.content }}
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'pane1', // 初始激活的tab名称
items: [
{ name: 'Pane 1', content: 'Content of Pane 1' },
{ name: 'Pane 2', content: 'Content of Pane 2' },
{ name: 'Pane 3', content: 'Content of Pane 3' }
]
};
},
methods: {
handleTabChange(tabName) {
console.log('当前激活的tab:', tabName); // 当tab切换时,这个函数会被触发并打印出新的tab名称
}
}
};
</script>
```
在这个例子中,`handleTabChange`方法会在`el-tabs`的`tab`切换时被调用,并传入新的激活tab的名称。
阅读全文