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 值并没有更新，还是 first
  console.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 = name
  console.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'
}复制