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')


const handleClick = (tab: TabsPaneContext, event: Event) => {
  
  

  
  console.log("activeName", activeName.value);  
  
  getTableData()
}


const getTableData = ()=>{
  const params = { tabs: activeName.value }
  getTable().then(res =>{
	console.log('最新数据', res)
   })
}

解决方案:

const activeName = ref('first')


const handleClick = (tab: TabsPaneContext, event: Event) => {
  
  const { name } = tab.props;
  activeName.value = name
  console.log("name", name);  
  getTableData()

  
  nextTick(() => {
     console.log("activeName", activeName.value);  
     getTableData()
  });
  
  
  setTimeout(() => {
    console.log("activeName", state.activeName);  
    getTableData()
  }, 200);
}

tab-change 事件

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

const activeName = ref('first')


const handleClick = (name: TabPaneName) => {
	console.log('name', name) 
	console.log('activeName', activeName.value) 
}