vue3+ts如何获取el-tab-pane的标签名字

在使用Element-Plus的el-tabs时，需要获取tab的名称，耗时大半天，找了很多，大部分都是如下：

template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane 
      v-for="(tab, index) in tabs" 
      :key="tab.name" 
      :label="tab.label" 
      :name="tab.name">
      {{ tab.label }} content
    </el-tab-pane>
  </el-tabs>
  <p>Active Tab: {{ activeTab }}</p>
  <p>Clicked Tab Label: {{ clickedTabLabel }}</p>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeTab = ref<string>('tab1');
    const clickedTabLabel = ref<string>('');
    const tabs = [
      { name: 'tab1', label: 'Tab 1' },
      { name: 'tab2', label: 'Tab 2' },
      { name: 'tab3', label: 'Tab 3' }
    ];

    const handleTabClick = (tab: { name: string; label: string }) => {
      clickedTabLabel.value = tab.label; // 记录点击的 tab 标签
    };

    return {
      activeTab,
      clickedTabLabel,
      tabs,
      handleTabClick
    };
  }
});
</script>

<style scoped>
/* 自定义样式 */
</style>

然而我发现tab-click的监听（handleTabClick ）中的参数，tab:tab: { name: string; label: string }所带来的name、label，在console打印出来是undefined，在各种查找答案之后，无意中发现可以将tab: { name: string; label: string }改成tab:any,然后通过tab.paneName即可获取。如下图：