<p>直接用 table.render() 传 data 数组即可,但必须满足三个硬性条件:容器存在(elem 必须为真实 DOM 节点且带 # 的 ID 选择器)、字段名与 cols.field 逐字完全匹配、cols 中的 field 不能缺失或拼错——任一不满足均导致对应列空白且无报错。</p>
直接用 table.render() 传 data 数组就行,但必须满足三个硬性条件:容器存在、字段名完全匹配、cols 中的 field 不能少一个——漏写或拼错,对应列就空着,layui 也不报错。
elem 必须指向真实存在的 DOM 节点
很多人表格不显示,根本不是代码问题,而是 elem 指错了地方。LayUI 不会提示“找不到元素”,只会默默跳过渲染。
-
elem只接受带#的 ID 选择器,比如'#userTable';写成'.user-table'或'table'都无效 - DOM 必须在调用
table.render()前已挂载。放在layui.use('table', function(){...})回调里最稳,别丢到全局作用域或$(document).ready()外面 - 如果表格容器是 Vue/React 动态插入的,得确认它真正在
document.body里——LayUI 不认虚拟 DOM,只认真实节点
data 字段名必须和 cols.field 逐字一致
LayUI 不做字段映射,也不忽略大小写或下划线。后端返回 user_name,你写 field: 'username',那一列就永远空白。
- 常见错误:后端用蛇形命名(
create_time),前端列配置写了field: 'createTime'→ 不匹配,数据不显示 - 驼峰字段(如
userName)必须原样写进field,不能改成username或user_name - 如果字段名含中文或特殊字符(如
用户ID),field也得一模一样,否则绑定失败 - 静态数据里没出现的字段,
cols里写了也没用;反过来,data里多出来的字段,只要没在cols里声明field,就不会渲染
page 和 limit 在静态数据里也要显式配好
哪怕只是本地分页,page: true 和 limit 也得写上,否则翻页控件不出现,count 字段也不需要(那是服务端分页用的)。
-
page: true开启分页功能,limit: 10表示每页 10 条——这两个是静态分页的开关,缺一不可 - 不需要手动计算总条数,LayUI 会自动用
data.length当总数 - 如果不想分页,就删掉
page: true,但注意:此时limit参数失效,所有数据一次性全量渲染 - 别把服务端分页的
count字段塞进静态数据对象里——它只在异步响应体中起作用,本地data数组里加了也没用
最容易被绕进去的地方,是以为“没报错=配置对了”。LayUI 的静默失败机制让它特别难调试:字段名差一个字母、ID 少个 #、DOM 还没生成就调用了 render——全都没提示,只留一片空白。盯住 elem、field、data 这三处,基本就能排除 90% 的静态渲染失败问题。


















