el-tabs 单独刷新

### 实现 el-tabs 单独刷新

为了实现在 Vue 和 Element UI 中 `el-tabs` 组件的单独刷新，可以利用 Vue 的响应式特性以及自定义事件来达到目的。当点击某个 tab 时触发特定逻辑处理函数，在该函数内部执行所需的数据获取或其他操作。

#### 方法一：通过监听 `@tab-click`

可以通过设置 `v-model` 来管理当前激活的选项卡名称，并结合 `@tab-click` 事件监听器捕获用户的交互行为。每当用户选择了不同的标签页，则会调用指定方法来进行相应的业务逻辑处理，比如发起 API 请求加载新数据等[^4]。

<template>
  <div id="app">
    <!-- 使用 border-card 类型 -->
    <el-tabs :type="'border-card'" @tab-click="handleTabClick" v-model="activeName">
      <el-tab-pane label="用户管理" name="first">用户</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色</el-tab-pane>
      <el-tab-pane label="任务管理" name="fourth">任务</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleTabClick(tab) {
      console.log('selected:', tab.name);
      
      // 基于选中的 Tab 执行相应动作
      switch (tab.name) {
        case "first":
          this.fetchUserData();
          break;
        case "second":
          this.fetchConfigData();
          break;
        case "third":
          this.fetchRoleData();
          break;
        case "fourth":
          this.fetchTaskData();
          break;
      }
    },

    fetchUserData() {/* ... */},
    fetchConfigData() {/* ... */},
    fetchRoleData() {/* ... */},
    fetchTaskData() {/* ... */}
  }
};
</script>

这种方法允许开发者针对每一个具体的 tab 定义独立的行为模式，从而实现了单个 tab 刷新的效果。

#### 方法二：动态渲染子组件

另一种方式是让每个 `el-tab-pane` 下的内容都作为一个独立的小部件或组件呈现出来。这样做的好处是可以更方便地控制各个部分的状态变化而不影响其他区域。对于需要频繁更新的部分，可以直接将其封装成一个新的 Vue 组件并传入必要的参数作为 props 进行传递[^3]。

例如：

<wq-tabs v-model="activeName" style="background:#f7f8fa; padding:20px;">
  <wq-tab-pane label="User" name="first"><user-component /></wq-tab-pane>
  <wq-tab-pane label="Config" name="second"><config-component /></wq-tab-pane>
  <wq-tab-pane label="Role" name="third"><role-component /></wq-tab-pane>
  <wq-tab-pane label="Task" name="fourth"><task-component /></wq-tab-pane>
</wq-tabs>

在这种情况下，如果希望某一部分能够自动重载其内容，可以在对应的子组件内实现生命周期钩子（如 mounted 或 updated），并在其中加入定时器或者其他机制去定期拉取最新信息。