在ElementPlus的tabs组件的tab-click事件中打印v-model绑定的值非点击的值
在ElementPlus的<el-tabs>
组件中,你可以使用v-model
来双向绑定当前激活的tab的索引,并且可以监听tab-click
事件来获取点击的tab的索引。如果你想在tab-click
事件中打印出绑定的v-model
值(即当前激活的tab索引),而不是点击的tab索引,你可以直接访问v-model
绑定的响应式数据。
以下是一个简单的例子:
<template>
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
</el-tabs>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const activeName = ref('first'); // 假设默认激活第一个tab
// 事件处理函数
const handleTabClick = (tab, event) => {
console.log('当前激活的Tab索引:', activeName.value); // 打印绑定的值
};
return {
activeName,
handleTabClick
};
}
};
</script>
在这个例子中,activeName
是一个响应式数据,它通过v-model
绑定到了<el-tabs>
组件上。在handleTabClick
事件处理函数中,我们通过activeName.value
来获取当前激活的tab的索引,并将其打印出来。这个值将始终是当前激活的tab的索引,而不是点击的tab的索引。
评论已关闭