layui 没有“简易模式”配置项,所谓简易即不发请求、不分页、直渲静态数据:必须删掉 url、不设 page(而非设为 false)、显式传入 data 数组,且字段名与 cols.field 严格一致。

Layui 没有“简易模式”这个配置项,所谓简易,就是不用分页、不走远程、只渲染静态数据——删掉 url 和 page 相关配置,直接传 data 数组即可。
table.render 里根本没有 simple 参数
翻遍 layui 2.8 源码和官方文档,table.render() 的 options 对象中**不存在 simple 字段**。社区里有人叫它“简单模式”,只是对一种轻量用法的俗称,不是内置功能。
- 只要写了
url,哪怕同时写了data,layui 也会忽略data,强制发起 AJAX 请求 - 只要写了
page: true或page: {...},就会启用分页栏并尝试计算总页数——哪怕你没给count - 真正实现“简易渲染”的唯一条件是:
url不填(或删掉)、page不设为true、显式提供data数组
怎么写才算真正简易?看这三行关键配置
下面这段代码就能跑起来,不发请求、不分页、不报错:
table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID'},
{field: 'username', title: '用户名'}
]],
data: [
{id: 1, username: '张三'},
{id: 2, username: '李四'}
]
});
-
data必须是数组,不能是 Promise 或函数 - 别写
url—— 写了就变远程加载,哪怕值是空字符串''也会触发请求 - 别写
page—— 设成false没用,layui 只认true或对象;不写才是最干净的“禁用”
为什么加了 page: false 还会出分页栏?
因为 page: false 并非 layui 的合法配置值,它会被忽略,最终 fallback 到默认行为(即无分页),但如果你同时写了 url,它又会悄悄启用远程分页逻辑——表面没栏,实际 Network 里能看到请求发出。
- 验证是否真简易:打开浏览器 DevTools → Network 标签页 → 刷新页面 → 确认没有任何 XHR 请求
- 如果看到请求,立刻检查:
url是否残留、page是否误配、data是否被包裹在异步回调里(比如data: getData()但getData是异步函数) - 常见坑:
data里字段名和cols中field对不上,导致表格空白——这不是分页问题,是数据映射失败
想加搜索或重载?别碰 page 配置,用 reload 就行
简易模式下要支持搜索或刷新,不要改 page,直接调 table.reload() 并传新 data:
table.reload('demo', {
data: filteredList // 新数组,不是远程地址
});
-
reload会保留原cols和elem,只替换数据 - 不要在
reload里传url,否则就退出简易模式了 - 如果数据量大(比如上千条),简易模式会一次性渲染全部 DOM,卡顿明显——这时就得切回服务端分页,而不是硬撑
简易模式的本质是“跳过所有异步和分页逻辑”,它的边界很清晰:有 data、无 url、无 page。多一个字段,就可能多一次请求或多一行样式干扰。











