当前位置：首页 > news >正文

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

news 来源：原创 2025/4/28 5:35:37

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

<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` 控制内容渲染

<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 钩子加载数据：

<!-- Tab1Content.vue -->
<script setup>
import { onMounted, ref } from 'vue';const data = ref(null);onMounted(async () => {// 加载数据data.value = await fetchData();
});
</script>

方法3: 使用 `keep-alive` 和 `activated` 钩子

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

<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 钩子：

<!-- Tab1Content.vue -->
<script setup>
import { ref, activated } from 'vue';const data = ref(null);const loadData = async () => {data.value = await fetchData();
};// 组件激活时加载数据
activated(() => {loadData();
});// 初始加载
loadData();
</script>