Element Plus骨架屏怎么动态控制显示和隐藏？

码农玉戈提问于 2026-03-04 13:08:25 阅读 2

组件

我用Element Plus的Skeleton做加载占位，但不知道怎么在数据加载完后自动隐藏它。试了v-if绑定loading状态，但骨架屏一闪就没了，体验不好。

这是我的代码：

<template>
  <el-skeleton :loading="loading" animated>
    <template #default>
      <p>{{ data.title }}</p>
    </template>
  </el-skeleton>
</template>

<script setup>
const loading = ref(true);
const data = ref({ title: '' });

onMounted(() => {
  setTimeout(() => {
    data.value.title = '加载完成';
    loading.value = false;
  }, 1000);
});
</script>

是不是用法不对？为啥内容还没渲染出来骨架屏就消失了？

UI组件 Vue组件主题定制

我来解答赞 1 收藏

反馈

1 条解答

Tr° 东霞 Lv1

你的问题出在状态管理的不同步上。如果你用 v-if 在骨架屏和内容之间硬切，Vue 需要销毁和重建 DOM，这就造成了闪烁。虽然你贴的代码用了插槽，但手动维护一个 loading 变量很容易在数据还没渲染完就切掉了状态。

更优雅的写法是去掉多余的 loading 变量，直接用数据的状态来驱动骨架屏的显示。这样能保证数据到位的一瞬间骨架屏才消失，体验丝滑。

<template>

  <el-skeleton :loading="!data.title" animated>

    <template #default>

      <p>{{ data.title }}</p>

    </template>

  </el-skeleton>

</template>



<script setup>

import { ref, onMounted } from 'vue'



const data = ref({ title: '' })



onMounted(async () => {

  // 模拟异步请求

  await new Promise(resolve => setTimeout(resolve, 1000))

  data.value.title = '加载完成'

  // 这里不需要手动改 loading，数据变了骨架屏自己会退场

})

</script>

这样写逻辑更纯粹，不需要操心 loading 状态什么时候改，数据有了自然就显示内容，避免了中间的空白期。

2026-03-04 15:33