Element Plus 的 Loading 加载怎么在表格上局部生效?

正利 ☘︎ 阅读 2

我在用 Element Plus 的 el-table,想在数据加载时只给表格加 loading,但一加上整个页面都灰了,这是为啥?

我试过这样写:

<el-table v-loading="loading" :data="tableData">
  <!-- 列定义 -->
</el-table>

结果 loading 遮罩盖住了整个 body,不是只遮表格。是不是还要加什么配置?

我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
东方爱敏
哈哈,这个问题我也踩过坑!Element Plus 的 v-loading 默认是全屏遮罩,要让它只在表格局部生效,你得加个 element-loading-parent 配置。

正确写法应该是这样:

v-loading="loading"
element-loading-parent-class="table-loading-parent"
:data="tableData">




CSS的话要加个定位父级:

.table-loading-parent {
position: relative;
}


这样 loading 效果就只会限制在表格范围内了。原理就是给表格父级加了个相对定位,让 loading 遮罩的绝对定位能正确计算范围。

对了,如果你发现还是有问题,检查下表格外层是不是有奇怪的 overflow:hidden 或者没设置高度的容器。
点赞
2026-03-08 00:02