快捷導(dǎo)航

Vue3 Element Plus el-tabs數(shù)據(jù)刷新實(shí)現(xiàn)方式

更新時(shí)間：2025年07月30日 09:13:04 作者：滿

這篇文章主要介紹了Vue3 Element Plus el-tabs數(shù)據(jù)刷新實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

方法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'">
        <!-- 內(nèi)容1 -->
        {{ tab1Data }}
      </div>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      <div v-if="activeTab === 'tab2'">
        <!-- 內(nèi)容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 數(shù)據(jù)已刷新'), 500);
  });
};

const fetchTab2Data = async () => {
  // 模擬API請求
  tab2Data.value = await new Promise(resolve => {
    setTimeout(() => resolve('Tab 2 數(shù)據(jù)已刷新'), 500);
  });
};

// 初始化加載第一個(gè)tab的數(shù)據(jù)
fetchTab1Data();
</script>

方法2: 使用v-if控制內(nèi)容渲染

<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 鉤子加載數(shù)據(jù)：

<!-- Tab1Content.vue -->
<script setup>
import { onMounted, ref } from 'vue';

const data = ref(null);

onMounted(async () => {
  // 加載數(shù)據(jù)
  data.value = await fetchData();
});
</script>

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

如果需要緩存組件但依然在切換時(shí)刷新數(shù)據(jù)：

<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();
};

// 組件激活時(shí)加載數(shù)據(jù)
activated(() => {
  loadData();
});

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