Layui表格加载动画loading怎么修改

layui table loading不显示或卡住的根本原因是done回调未正确触发，需确保url返回标准数据格式、合理使用loading配置、设置容器定位及覆盖CSS样式。

layui table loading 图标不显示或卡住

常见现象是调用 table.render() 后，表格区域只有一片空白，或者 loading 动画一闪就消失、没等数据回来就停了。根本原因不是图标“被隐藏”，而是 layui 的 loading 状态依赖于 done 回调是否被正确触发，以及是否在异步加载中误用了同步逻辑。

实操建议：

• 检查 url 返回的数据格式是否符合 layui 要求（必须含 code、msg、count、data 字段），否则 done 不会执行，loading 就不会自动关闭，视觉上像“卡住”
• 若用 data 直接传数组（非异步），则 loading 不会出现——layui 只在 url 模式下才自动启 loading；如需手动控制，得自己加 DOM
• 不要在 parseData 里 throw 错误或返回非法结构，这会导致 loading 残留

自定义 loading 文字或图标（非替换 CSS）

layui 默认的 loading 是一个带文字的灰色圆圈，不能直接通过配置项换图标，但可以通过 loading 参数开关 + 手动插入 HTML 实现可控替换。

实操建议：

• 在 table.render() 中设 loading: false，关掉默认 loading
• 在 before 回调里，用 JS 向表格容器插入自定义 HTML，比如：$('#demo').before('<div class="my-loading">加载中...</div>')
• 在 done 回调里，用 $('.my-loading').remove() 清掉它
• 注意：别用 loading: 'xxx' 这种写法——loading 参数只接受布尔值，传字符串会被忽略

修改 loading 样式（CSS 层面）

layui 的 loading 图标本质是伪元素 + CSS 动画，定位在 .layui-table-view .layui-table-box 内部的 .layui-table-loading 元素上。改样式最稳的方式是覆盖它的类，而不是试图改 layui 源码。

Murf AI

AI文本转语音生成工具

下载

实操建议：

• 在你自己的 CSS 文件里加规则，权重要够（比如加 !important 或多嵌套一层）：
• .layui-table-loading { background-color: rgba(255,255,255,0.9); }
• .layui-table-loading i { color: #009688; font-size: 24px; }
• 不要直接改 layui.css，升级时会被覆盖
• 如果用了模块化引入（如 webpack），确保你的 CSS 在 layui 样式之后加载

loading 出现在错误位置（比如整个页面居中）

这是因表格容器没有明确高度，导致 .layui-table-loading 的绝对定位失效，父级找不到相对定位上下文，于是 fallback 到 viewport 居中。

实操建议：

• 给表格容器（如 #demo）设置 position: relative
• 同时确保它有明确高度（哪怕 min-height: 300px），否则 loading 会飘到页面顶部或底部
• 避免把表格直接塞进 body 或浮动布局里——这些环境缺乏稳定的定位锚点
• 用浏览器开发者工具检查 .layui-table-loading 的 offsetParent，确认它是不是意外指向了 body