vue2 element tabs标签页的标题字数太多省略

在Vue 2中，Element UI的tabs组件（`el-tabs`）提供了`tab-click`和`tab-change`两个事件来处理用户的交互。当你希望在切换标签时立即获取新的标题值时，`tab-click`事件可能不是最佳选择，因为它在每次点击时触发，而标题可能还在更新过程中。

如果你想要获取当前激活的tab标签名，在`tab-change`事件中更为合适。这个事件会在切换完成后触发，传递给回调函数的是新激活的标签名。例如：

<template>
  <el-tabs v-model="activeName" @tab-change="handleClick">
    <el-tab-pane :label="item.title" v-for="(item, index) in items" :key="index" :name="item.name"></el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first', // 初始化选中的标签名
      items: [
        { title: '太长标题需要省略...', name: 'Config', ... },
        { title: '另一个选项', name: 'Second', ... },
        // 更多选项...
      ]
    };
  },
  methods: {
    handleClick(name: string) {
      console.log('激活的标签名:', name);
      console.log('当前activeName:', this.activeName); // 此处会得到最新的标签名
    }
  }
};
</script>

在这个例子中，即使标题过长，`handleClick`函数会在标签实际改变之后获取到正确的`name`值。