Layui table.render 无 simple 模式配置项;实现简单渲染只需设置 data 数组、cols 列定义,并显式指定 page: false,且不填 url。
table.render 中没有 simple 模式这个配置项
layui 官方文档和所有源码中,table.render() 的配置参数里**从未定义过 simple 这个字段**。所谓“简单模式”,是社区部分开发者对「不启用分页、不加载远程数据、直接传静态 data 渲染」这类轻量用法的非正式叫法,并非 layui 内置的 mode 或 type 选项。
想实现“简单渲染”,只用 data + cols 就够了
真正起作用的是:不配 url、不设 page: true、直接给 data 数组——Layui 就会跳过异步请求和分页逻辑,走本地数据直出流程,这才是你想要的“简单”。
-
url不填或删掉,否则 Layui 会强制发起 AJAX 请求,即使返回空也多一次网络开销 -
page必须显式设为false(默认是undefined,某些版本下会被误判为开启) -
data必须是标准数组,每项字段名要和cols中的field完全一致(区分大小写) - 别漏掉
elem,且对应 DOM 元素必须已存在,否则控制台报elem is not found
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
data: [
{id: 1, username: '张三', city: '杭州'},
{id: 2, username: '李四', city: '北京'}
],
cols: [[
{field: 'id', title: 'ID'},
{field: 'username', title: '姓名'},
{field: 'city', title: '城市'}
]],
page: false // 关键!必须写 false,不能省略
});
});
常见错误:把 form.render() 或 select 初始化当 table 简单模式
有人把 form.render() 后手动拼 <option>、或用 $.ajax 填充下拉框,误以为这是 table 的“简单模式”。其实那是表单模块的事,和 table 渲染无关。table 的“简”只体现在数据来源是否本地、是否绕过分页调度器。
- 混用
url和data:Layui 会优先用url,data被忽略,且控制台无警告 - 写了
page: true却没配limits或后端不返回count:表格空白,F12 看 Network 会发现请求卡在 pending - 动态插入
<table>后再调table.render(),但 DOM 未挂载完成:报错elem is not found
兼容性注意:Layui 2.8+ 对静态 data 渲染更严格
2.8 版本起,table 组件加强了数据校验。如果 data 是空数组 [],表格会显示“暂无数据”,但不会报错;可如果 data 是 null 或 undefined,则直接中断渲染且控制台输出 data is invalid。
- 确保初始化时
data至少是[],避免运行时异常 - 若需后续追加数据,用
table.reloadData()或重赋值table.config.data后调table.reload(),不要直接 push 到原数组再 render - 2.8.5 及以上版本支持
height: 'auto'配合静态 data,让表格自适应内容高度,比固定 height 更稳妥
page: false 的显式声明——很多人以为不写就是关闭,结果表格莫名多出一页空分页栏,还查不出原因。

















