vue3中element tabs标签页 tab-click事件无法拿到最新值

element tabs标签页有2个常用的事件方法，tab-click 和 tab-change

在这里插入图片描述

tab-click事件

tab-click事件：当用户点击Tab标签时触发，有2个返回参数， (pane: TabsPaneContext, ev: Event)
pane.props.name 中可以获取到最新的tab页签绑定值

注意：很多人在平常使用的时候并不会从 pane.props.name 中去获取最新tab页签绑定值，会直接使用之前的activeName作为最新值

问题复现（错误用法）:

<el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="User" name="first">User</el-tab-pane><el-tab-pane label="Config" name="second">Config</el-tab-pane><el-tab-pane label="Role" name="third">Role</el-tab-pane><el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>const activeName = ref('first')//模拟点击了 Config 这个标签
const handleClick = (tab: TabsPaneContext, event: Event) => {//不从 tab返回值中获取最新的tab值//直接使用 activeName 来查询最新数据// 这个时候的 activeName.value 值并没有更新，还是 firstconsole.log("activeName", activeName.value);  // 'first'// 会造成无法拿到最新的 绑定值getTableData()
}//标签切换 执行重新获取数据接口
const getTableData = ()=>{const params = { tabs: activeName.value }getTable().then(res =>{console.log('最新数据', res)})
}

解决方案:

//其余代码省略...
const activeName = ref('first')//模拟点击了 Config 这个标签
const handleClick = (tab: TabsPaneContext, event: Event) => {//方法一: 重新赋值const { name } = tab.props;activeName.value = nameconsole.log("name", name);  // 'second'getTableData()//方法二: 数据更新后，执行方法nextTick(() => {console.log("activeName", activeName.value);  // 'second'getTableData()});//方法三: 使用setTimeout定时器setTimeout(() => {console.log("activeName", state.activeName);  // 'second'getTableData()}, 200);
}

tab-change事件

tab-change事件：当Tab标签页的切换完成时触发，有1个返回参数， (name: TabPaneName)
可以直接拿到最新的绑定值

//其余代码省略...
const activeName = ref('first')//模拟点击了 Config 这个标签
const handleClick = (name: TabPaneName) => {console.log('name', name) // 'second'console.log('activeName ', activeName.value) // 'second'
}