Element Plus 的 Loading 加载怎么在表格上局部生效? 正利 ☘︎ 提问于 2026-03-07 23:29:18 阅读 2 组件 我在用 Element Plus 的 el-table,想在数据加载时只给表格加 loading,但一加上整个页面都灰了,这是为啥? 我试过这样写: <el-table v-loading="loading" :data="tableData"> <!-- 列定义 --> </el-table> 结果 loading 遮罩盖住了整个 body,不是只遮表格。是不是还要加什么配置? 我来解答 赞 1 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 东方爱敏 Lv1 哈哈,这个问题我也踩过坑!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 加载更多 相关推荐 2 回答 104 浏览 为什么Element Plus的加载动画在表格数据加载时没有显示? 在用Element Plus的el-table做数据加载时,按照文档写了v-loading="loading",但点击加载按钮后动画一直没出现,控制台也没报错,这是怎么回事? 我已经在data里定义了... 萌新.朝阳 组件 2026-02-14 13:54:28 1 回答 8 浏览 Element Plus骨架屏怎么动态控制显示和隐藏? 我用Element Plus的Skeleton做加载占位,但不知道怎么在数据加载完后自动隐藏它。试了v-if绑定loading状态,但骨架屏一闪就没了,体验不好。 这是我的代码: <templa... 码农玉戈 组件 2026-03-04 13:08:25 1 回答 9 浏览 Element Plus 走马灯怎么设置自动轮播不生效? 我用 Element Plus 的 Carousel 组件,想让它自动轮播,但加了 autoplay 属性后完全没反应,还是得手动点。是不是还要配其他参数?我试过把 interval 设成 2000,... 西门长春 组件 2026-03-05 09:56:21 1 回答 10 浏览 Element Plus的Avatar头像不显示图片是怎么回事? 我在用Element Plus的Avatar组件时,传了图片地址但头像一直显示默认占位符,没报错也没加载图片。我试过直接写死URL和用变量绑定,都不行。 代码是这样写的: <el-avatar ... IT人红会 组件 2026-03-04 14:23:19 2 回答 16 浏览 Element Plus折叠面板怎么默认展开多个面板? 我用Element Plus的Collapse组件,想让页面加载时默认展开多个面板,但文档里只看到activeNames可以设一个字符串或数组,我试了传数组进去却没生效,控制台也没报错。 我的代码是这... 小翠翠 组件 2026-03-03 20:07:23 2 回答 24 浏览 Element Plus时间线怎么自定义节点图标? 我用Element Plus的Timeline组件,想把默认的圆点换成自定义图标,但文档里没看懂怎么弄。试了在el-timeline-item里加icon属性,结果根本没生效,控制台也没报错,就是显示... 西门奥杰 组件 2026-02-26 17:19:19 2 回答 80 浏览 Element Plus的Skeleton组件怎么设置自适应高度? 在用Element Plus的Skeleton做列表加载效果时,发现固定高度设置后内容区域高度不随真实内容变化,导致真实内容显示时布局错乱。比如设置了height="80px",但实际图片和文字加载后... 爱学习的冬冬 组件 2026-02-10 22:49:26 2 回答 84 浏览 element-plus的el-image设置error属性后占位图没显示怎么办 在用element-plus的el-image组件时,图片加载失败后设置的error属性里的占位图完全没显示,页面上直接显示空白区域。我检查过图片路径没问题,正常访问能打开,但出错时就是不显示占位图。... 顺红 组件 2026-02-02 08:42:45 2 回答 79 浏览 Element Plus时间线节点背景色怎么改不生效? 在用Element Plus的Timeline组件时,想给节点改成蓝色背景加白色图标,按官网写法设置了dot-icon和content,但背景色始终显示默认的灰色,内联样式也试过了还是没反应,这是为什... 南宫俊宇 组件 2026-01-29 02:15:29 1 回答 20 浏览 Element Plus 的 Result 组件怎么自定义图标? 我用 Element Plus 的 Result 组件展示操作结果,但想把默认的图标换成自己的 SVG 图标,试了 icon 属性但没生效,是不是用法不对? 官方文档说 icon 支持传入组件,但我直... 启航 组件 2026-03-06 11:46:20
v-loading默认是全屏遮罩,要让它只在表格局部生效,你得加个element-loading-parent配置。正确写法应该是这样:
CSS的话要加个定位父级:
这样 loading 效果就只会限制在表格范围内了。原理就是给表格父级加了个相对定位,让 loading 遮罩的绝对定位能正确计算范围。
对了,如果你发现还是有问题,检查下表格外层是不是有奇怪的
overflow:hidden或者没设置高度的容器。