空数组不显示“暂无数据”是因为Layui table仅在parseData返回data为空数组且count为0时触发提示;若response.dataName配置错误、parseData未返回完整四字段、done回调破坏空状态判断或自定义文案未走done处理,均会导致空白无提示。
为什么空数组不显示“暂无数据”
layui table 只有在 parsedata 返回的 data 是空数组([])且 count 为 0 时,才触发默认提示;如果后端返回 {"data":[]},但你没配 response.dataname: 'data',layui 就读不到这个数组,res.data 是 undefined,直接卡住——既不报错也不提示。
常见表现:表格区域空白、加载动画一直转、控制台无报错但 done 回调里 res.data 是 undefined 或 null。
- 打开 Network 面板,确认响应体中真实的数据字段名(比如是
list、items还是data) - 检查
response.dataName是否与之完全一致,大小写敏感 - 若结构嵌套(如
{"result":{"rows":[]}}),别硬调response,改用parseData
parseData 必须返回完整四字段对象
parseData 不是“增强解析”,而是接管整个响应结构转换。它必须返回含 code、msg、count、data 的对象,缺一个,“暂无数据”逻辑就失效。
例如后端返回 {"code":200,"message":"ok","list":[],"total":0},要这样写:
parseData: function(res) {
return {
code: res.code === 200 ? 0 : res.code,
msg: res.message || '',
count: res.total || 0,
data: res.list || []
};
}
-
count必须是数字,不能是undefined或字符串"0" -
data必须是数组,哪怕为空 ——[]和null效果完全不同 - 别在
parseData里做数据清洗(如把null换成'-'),那是templet的事
done 回调里别破坏空状态判断逻辑
done 是最后干预点,但也是最容易踩坑的地方:手动清空 tbody、重写容器 HTML、或调用 table.reload() 时不传全参数,都会让 Layui 丢失对空数据的感知。
调试时加一句:console.log('done:', res.data, res.count),确保输出是 [] 和 0。
- 避免在
done里执行$(elem).html('')或$('.layui-table-body').empty() - 如果要用
table.reload(),每次都要带url、where、page,否则可能复用旧缓存 - 想插“去添加”按钮?在
done里操作$(this.elem).next('.layui-table-box') .find('.layui-table-body'),用.append()插入带layui-table-emptyclass 的 div
自定义文案或按钮必须走 done,text.none 不生效
text: { none: 'xxx' } 对 table 模块完全无效——这是 Layui 文档没写清楚的坑,该配置只在 laydate、form 等组件中起作用。
所有定制化空状态(文字、按钮、图标、重试逻辑)都得在 done 回调里手动处理,且要配合 CSS 保证可见性:
- 容器需有足够高度,
.layui-table-box不能被overflow: hidden截断 - 插入的 DOM 要带
layui-table-emptyclass,否则样式不生效 - 按钮点击事件必须用事件委托(如
$(document).on('click', '.reload-btn', ...)),因为tbody可能被重绘
真正起作用的永远是 done + parseData + 真实的空数组和零计数,三者缺一不可。











