Vue3 Element Plus el-tabs数据刷新方法

方法1: 使用 @tab-change 事件

javascript 复制代码
<template>
  <el-tabs v-model="activeTab" @tab-change="handleTabChange">
    <el-tab-pane label="Tab 1" name="tab1">
      <div v-if="activeTab === 'tab1'">
        <!-- 内容1 -->
        {{ tab1Data }}
      </div>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      <div v-if="activeTab === 'tab2'">
        <!-- 内容2 -->
        {{ tab2Data }}
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('tab1');
const tab1Data = ref(null);
const tab2Data = ref(null);

const handleTabChange = (tabName) => {
  if (tabName === 'tab1') {
    fetchTab1Data();
  } else if (tabName === 'tab2') {
    fetchTab2Data();
  }
};

const fetchTab1Data = async () => {
  // 模拟API请求
  tab1Data.value = await new Promise(resolve => {
    setTimeout(() => resolve('Tab 1 数据已刷新'), 500);
  });
};

const fetchTab2Data = async () => {
  // 模拟API请求
  tab2Data.value = await new Promise(resolve => {
    setTimeout(() => resolve('Tab 2 数据已刷新'), 500);
  });
};

// 初始化加载第一个tab的数据
fetchTab1Data();
</script>

方法2: 使用 v-if 控制内容渲染

javascript 复制代码
<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      <Tab1Content v-if="activeTab === 'tab1'" />
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      <Tab2Content v-if="activeTab === 'tab2'" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue';
import Tab1Content from './Tab1Content.vue';
import Tab2Content from './Tab2Content.vue';

const activeTab = ref('tab1');
</script>

在子组件中使用 onMounted 钩子加载数据:

javascript 复制代码
<!-- Tab1Content.vue -->
<script setup>
import { onMounted, ref } from 'vue';

const data = ref(null);

onMounted(async () => {
  // 加载数据
  data.value = await fetchData();
});
</script>

方法3: 使用 keep-aliveactivated 钩子

如果需要缓存组件但依然在切换时刷新数据:

html 复制代码
<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      <keep-alive>
        <Tab1Content v-if="activeTab === 'tab1'" />
      </keep-alive>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      <keep-alive>
        <Tab2Content v-if="activeTab === 'tab2'" />
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>

在子组件中使用 activated 钩子:

javascript 复制代码
<!-- Tab1Content.vue -->
<script setup>
import { ref, activated } from 'vue';

const data = ref(null);

const loadData = async () => {
  data.value = await fetchData();
};

// 组件激活时加载数据
activated(() => {
  loadData();
});

// 初始加载
loadData();
</script>

注意事项

  1. 使用 v-if 会完全销毁和重建组件,适合数据完全独立的情况

  2. keep-alive + activated 适合需要保留组件状态但刷新数据的情况

  3. 对于简单场景,直接使用 @tab-change 事件即可

相关推荐
江城开朗的豌豆4 分钟前
Vue/React凭什么吊打传统前端?6年老司机带你揭秘它们的性能杀招!
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
虚拟DOM:为什么React/Vue比直接操作DOM快10倍?
前端·javascript·vue.js
mrsk5 分钟前
JavaScript中的大数相加是怎么突破数字的极限的?
前端·javascript·面试
mrsk5 分钟前
JavaScript作用域:变量的「地盘」之争
前端·javascript·面试
光影少年6 分钟前
vue3.6更细哪些东西
前端·vue.js·掘金·金石计划
namehu10 分钟前
深度解析:移动端 1px 边框问题与 rem 方案
前端·javascript·响应式设计
小高00711 分钟前
JavaScript 隐藏技巧:让代码量减少一半的 5 个方法
前端·javascript·面试
FSHOW11 分钟前
重新造轮子?HestJS:让 Hono 拥有 NestJS 的优雅
前端·javascript·后端
练习前端两年半14 分钟前
Vue 3 Render函数深度解析:Text、Comment、Fragment节点的渲染机制
前端·vue.js
namehu14 分钟前
“c is not a function” - 一次由 useEffect 异步函数引发的 React 底层崩溃分析
前端·javascript·react.js