Vue3-elementui中el-tabs切换实时更新数据

在Vue 3和Element UI中，可以通过监听el-tabs的tab-click事件来实现在切换标签时更新数据的需求。以下是一个简单的示例：

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <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-tabs>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const activeName = ref('first');
 
    // 定义方法处理标签的点击事件
    const handleTabClick = (tab, event) => {
      // 根据tab.name或者其他条件更新数据
      console.log('更新数据', tab, event);
      // 例如，根据tab.name的值来判断需要加载的数据
      // fetchData(tab.name);
    };
 
    // 模拟数据加载的函数
    // const fetchData = (tabName) => {
    //   // 根据tabName加载对应的数据
    //   console.log('加载数据', tabName);
    // };
 
    return {
      activeName,
      handleTabClick,
    };
  },
};
</script>

在这个示例中，el-tabs的v-model绑定了当前激活的标签的name。handleTabClick方法会在每次点击标签时被调用，并且接收到tab-click事件的参数，其中包含了当前点击的标签的详细信息。在这个方法中，你可以根据需要更新数据。

请注意，示例中的fetchData函数被注释掉了，实际应用中你需要根据你的需求来实现数据加载逻辑。