Element Plus的Skeleton组件怎么设置自适应高度？

爱学习的冬冬提问于 2026-02-10 22:49:26 阅读 44

组件

在用Element Plus的Skeleton做列表加载效果时，发现固定高度设置后内容区域高度不随真实内容变化，导致真实内容显示时布局错乱。比如设置了height="80px"，但实际图片和文字加载后高度还是保持80px不变。

尝试过把height改成auto和百分比都不生效，查文档也没找到相关说明。控制台没有报错，但视觉上真实内容总被截断。用浏览器开发者工具看，Skeleton的包裹层有固定高度限制住了子元素。


<el-skeleton :rows="3" animated :throttle="500" style="width: 100%">
  <template #template>
    <el-skeleton-item variant="h4" style="width: 40%" />
    <el-skeleton-item variant="p" height="80px" />
  </template>
  <template #default>
    <h3>真实标题</h3>
    <p>真实内容可能有多行文本...</p>
  </template>
</el-skeleton>

Vue组件

我来解答赞 4 收藏

反馈

2 条解答

爱华 Dev Lv1

这个问题我之前也踩过坑，Element Plus的Skeleton组件默认会设置固定高度，确实不太友好。解决办法是不要直接在el-skeleton-item上写死height，而是通过CSS覆盖它的样式。

具体做法是给el-skeleton-item加个类名，比如叫skeleton-content，然后在样式里这样写：

.skeleton-content {

  height: auto !important;

  min-height: 80px; /* 保底高度 */

}

改完后你的代码大概是这样：

<el-skeleton :rows="3" animated :throttle="500" style="width: 100%">

  <template #template>

    <el-skeleton-item variant="h4" style="width: 40%" />

    <el-skeleton-item variant="p" class="skeleton-content" />

  </template>

  <template #default>

    <h3>真实标题</h3>

    <p>真实内容可能有多行文本...</p>

  </template>

</el-skeleton>

这里的关键点是用min-height来保证骨架屏有个基础高度，同时允许它根据内容自动撑开。记得加上!important，不然会被组件内部样式覆盖掉。

另外提醒一下，如果你用了scoped样式，记得用深度选择器::v-deep或者:deep()来穿透作用域，不然样式可能不生效。

别走弯路去改组件源码或者用其他奇技淫巧，这个方法最稳妥。我就是试了各种姿势后才找到这个解法，亲测有效。

2026-02-15 13:00

皇甫艳苹 Lv1

检查一下 el-skeleton-item 的 height 属性别写死，改成 auto 就行。你现在的问题是骨架图占位高度固定了，真实内容撑不开。

把这行改掉：

<el-skeleton-item variant="p" height="80px" />

换成：

<el-skeleton-item variant="p" height="auto" />

另外外层容器也别限制死高度，保证内容能自由撑开。

2026-02-10 23:04