这是一个创建于 43 天前的主题，其中的信息可能已经有所发展或是发生改变。
App.vue 里边的代码是
<el-main class="container">
<router-view v-slot="{ Component }">
<keep-alive v-if="$route.meta.keepAlive">
<component :is="Component" :key="$route.path" />
</keep-alive>
<component :is="Component" :key="$route.path" v-else/>
</router-view>
</el-main>
页面中只在 table 组件上加了 v-loading ，请求数据前设置为 true ，得到数据后为 false 。现在的问题是第一次进
入页面加载数据时，table 会直接显示 no data ，而不是 loading 转圈。各位大佬有遇到过这个问题吗，求教。
第 1 条附言 · 42 天前
最后问题解决了用的是服务的方式调用v-loading
import { ElLoading } from 'element-plus'
// 取数据之前调用
const loadingInstance = ElLoading.service({fullscreen: true})
// 结束时关闭
loadingInstance.close()
10 条回复 • 2024-09-27 13:13:06 +08:00
 |
1
Happy66606 43 天前
这是因为 `keep-alive` 缓存了组件的状态，当你再次进入页面时，组件不会被重新渲染，而是直接从缓存中取出之前的状态。因此，`v-loading` 的状态也不会被重新设置。
你可以尝试在组件的 `activated` 生命周期钩子中手动设置 `v-loading` 的状态。例如： ```javascript activated() { this.loading = true; // ... 请求数据 ... } ``` 或者，你可以使用 `keep-alive` 的 `include` 属性来排除某些组件不被缓存。例如： ```html <keep-alive :include="['Home', 'About']"> <!-- ... --> </keep-alive> ``` 这样，`table` 组件就不会被缓存，`v-loading` 的状态就会被正常设置。 另外，你也可以尝试使用 `v-if` 来控制 `table` 组件的渲染，例如： ```html <table v-if="!loading" v-loading="loading"> <!-- ... --> </table> ``` 这样，当 `loading` 为 `true` 时，`table` 组件就不会被渲染。 |
 |
2
coollest OP @Happy66606 感谢大佬，我试了一下 activated 钩子的方法，好像还是不太行啊，就是请求完一次数据之后，组件被缓存，第二次进入也没有 loading 的这个问题。现在就是第一次进入页面，v-loading 还是不生效。再次感谢！我再自己研究一下
|
 |
3
fishlium 43 天前
你的数据加载写在什么地方的
|
|
8
coollest OP @fishlium 昨晚发现这个问题了，如果按照帖子里的写法 keepAlive 就直接失效了，放在 component 上才能正常生效。但是还是没有 loading 的效果
|
 |
9
0xD800 42 天前
有复现 demo 吗 用 setTimeout 模拟数据请求
|
|
10
coollest OP @0xD800 差不多是这样的
<script lang="ts" setup> import axios from 'axios'; import { ElLoading } from 'element-plus' import { onMounted } from 'vue'; let loadingInstance:any = null function getData() { let res:any = axios.post('xxx') if (res && res.success) { loadingInstance.close() } else { //报错提示 loadingInstance.close() } } onMounted(() => { loadingInstance = ElLoading.service({fullscreen: true}) //请求数据 getData() }) </script> |
Select Language