Vue3 Element Plus el-tabs数据刷新实现方式
作者：滿
这篇文章主要介绍了Vue3 Element Plus el-tabs数据刷新实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
方法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>注意事项
- 使用
v-if会完全销毁和重建组件，适合数据完全独立的情况 keep-alive+activated适合需要保留组件状态但刷新数据的情况- 对于简单场景，直接使用
@tab-change事件即可
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。