el-tab-pane标签怎么怎么监听当前在哪个tab，每个tab已固定内容

`el-tab-pane`是Element UI库中的一个组件，它用于Vue.js中创建一个带选项卡的面板，每个选项卡都有自己的内容区域。要监听当前激活的`tab pane`，你可以使用`v-model`属性绑定一个变量，并利用`tab-change`事件。

首先，在你的Vue实例中，设置一个变量来追踪当前的`tab`：

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <!-- tab项列表 -->
    <el-tab-pane :label="tab1Label" :key="1" v-if="showTab1">Tab 1 Content</el-tab-pane>
    <el-tab-pane :label="tab2Label" :key="2" v-if="showTab2">Tab 2 Content</el-tab-pane>
    <!-- 添加更多tab... -->
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 1, // 初始化第一个tab为选中状态
      tab1Label: 'Tab 1',
      tab2Label: 'Tab 2',
      showTab1: true,
      showTab2: false, // 可以根据实际需要动态控制显示隐藏
    };
  },
  methods: {
    handleTabClick(tabIndex) { // 当点击tab时触发这个方法
      console.log('当前激活的tab:', tabIndex);
      this.showTab1 = false; // 如果不是第一个tab，则隐藏它
      this.showTab2 = (tabIndex === 2); // 显示对应的第二个tab
    }
  }
};
</script>

在这个例子中，当你点击不同的`tab`时，`handleTabClick`方法会被调用，参数`tabIndex`表示激活的`tab`索引。同时，会根据新的激活`tab`更新`showTab1`和`showTab2`的状态，让对应的内容可见。