el-tab-pane点击切换页面

要实现 el-tab-pane 的点击切换页面效果，你可以使用 element-ui 提供的 `tab-click` 事件和 `activeName` 属性来实现。

首先，在 el-tabs 组件中，为每个 el-tab-pane 添加 `name` 属性，用于标识不同的 tab-pane：

<el-tabs v-model="activeTab" @tab-click="handleTabClick">
  <el-tab-pane name="tab1" label="Tab 1">Content 1</el-tab-pane>
  <el-tab-pane name="tab2" label="Tab 2">Content 2</el-tab-pane>
  <!-- 其他 tab-pane... -->
</el-tabs>

然后，在 Vue 实例中，定义 `activeTab` 数据属性，并在 `handleTabClick` 方法中处理点击事件：

data() {
  return {
    activeTab: 'tab1'  // 默认选中的 tab
  };
},
methods: {
  handleTabClick(tab) {
    this.activeTab = tab.name;  // 切换选中的 tab
  }
}

在上述代码中，我们使用 `v-model` 指令将 `activeTab` 和 el-tabs 组件进行双向绑定，以便跟踪当前选中的 tab。然后，通过 `@tab-click` 监听点击事件，并在 `handleTabClick` 方法中更新 `activeTab` 数据属性，从而实现切换页面的效果。

通过以上代码，你可以在 el-tab-pane 中点击切换页面。希望对你有所帮助！如果你还有其他问题，请随时提问。