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

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



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



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


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

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

在子组件中使用 activated 钩子:


注意事项

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

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

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

你可能感兴趣的:(vue.js,javascript,elementui)