table.render() 的 loading 文字不能直接改,因为初始化后 loading 层固化为静态 DOM,不响应配置更新;必须通过 CSS 选择器定位 .layui-table-loading 元素并手动修改其 div 子节点文本。
table.render() 的 loading 文字为什么不能直接改
因为 table.render() 初始化时只读一次 loading: {text: '加载中'},之后 loading 层(.layui-table-loading)就固化为静态 dom,不响应 js 变量或配置更新。你改了配置对象、重赋值 text 字符串,表格内部完全感知不到——它不会重新渲染或监听变化。
手动操作 .layui-table-loading 元素是最稳的方案
必须用 CSS 选择器定位到对应表格的 loading 区域,再修改其子元素文本。关键点:
-
lay-id是唯一锚点,没设的话 selector 会失效 - loading 元素不在表格容器内,而在紧邻的
.layui-table-box后面 - 文案实际在
.layui-table-loading > div里,不是直接设text()到父级
示例(表格 lay-id="userTable"):
const $loading = $('.layui-table[lay-id="userTable"] + .layui-table-box .layui-table-loading');
if ($loading.length) {
$loading.find('div').text('正在校验权限...');
$loading.show();
}
// 请求完成后
setTimeout(() => {
table.reload('userTable', { url: '/api/users' });
$loading.hide(); // reload 会自动 show 一次,这里 hide 安全
}, 800);
别依赖 table.set() 或 reload 强刷 loading 文案
有人试过先 table.set({ loading: { text: '新文案' } }) 再 reload,但无效。原因:
-
table.set()不触发 loading 区域重绘,只影响后续初始化行为 -
reload()会重建整个表格 DOM,但 loading 文案仍取自原始 render 配置,不是 set 的值 - 如果没传
loading配置,reload 默认用空字符串,导致文案消失
分页开启时 loading 层可能被覆盖或延迟出现
当 page: true 且后端返回慢,loading 层有时不显示,或刚闪一下就没了。这是因为 Layui 在分页模式下对 loading 的控制逻辑更复杂:
- 它优先等分页数据结构(
count字段)就位,才决定是否显示 loading - 若后端响应无
count或格式错误,loading 可能压根不触发 - 此时靠手动
$loading.show()更可靠,但得确保 DOM 已生成(放在done回调外、异步请求前执行)
真正容易被忽略的是:loading 文案变更必须发生在 reload 触发前,且不能依赖任何“配置同步”幻想——它就是个普通 DOM 节点,按需改、按需 show/hide 就行。


















