layui.table.reload()不能直接加行,须改table.cache后调用table.render()重绘;2.8+可用table.addRow()但仅限本地数据且不更新cache。
layui.table.reload() 不能直接加行,得用 table.cache + table.render() 重绘
很多人试过调 table.reload() 传新数据进去,发现表格没反应——因为这个方法只刷新已有行的渲染,不支持“追加”。真正能动态加一行的,是手动改 table.cache 然后触发重绘。
核心逻辑是:拿到当前表格实例的缓存数据 → 推入新对象 → 调用 table.render() 重新生成表格(注意不是 reload())。
-
table.cache是个对象,键为表格id,值为原始数据数组,可直接push() - 必须确保新数据对象的字段和列定义
cols中的field严格对应,否则显示为空 - 如果用了分页,新增行不会自动翻页,得手动控制
page.curr或清空分页跳到第一页
如何安全获取并修改 table.cache 中的数据
不能直接写 table.cache['myTable'].push(...) —— 因为表初始化前 cache 可能还没挂载,或 id 写错导致 undefined。得先确认缓存存在且可写。
- 用
layui.table.get('myTable')拿实例,再读config.data更稳妥(尤其开启url异步加载时) - 如果确定走本地数据(
data: []),才直接操作table.cache['myTable'] - 修改后记得深拷贝一份再传给
render(),避免引用污染(尤其多人协作改同一数组)
示例:
const myData = layui.table.cache.myTable || [];
myData.push({ id: Date.now(), name: '张三', status: '启用' });
layui.table.render({
elem: '#myTable',
data: [...myData], // 注意这里用展开运算符复制
cols: [[ /* 原列配置 */ ]],
page: true
});
新增行后排序、筛选失效?因为 table.render() 会丢掉当前状态
每次调 table.render() 都是全新渲染,之前选中的行、排序字段、搜索关键词全没了。这不是 bug,是设计如此。
- 如果需要保留排序,得自己记下
table.config.sort和table.config.where,重绘时传回去 - 筛选框(如
toolbar自定义搜索)要手动同步 value,并在done回调里恢复高亮 - 更轻量的做法:不用
render(),改用table.addRow()(Layui 2.8+ 新增)——但它只支持单页模式,且不触发分页更新
用 table.addRow() 快速加行,但要注意兼容性和限制
2.8 版本起官方提供了 table.addRow(),看起来最直觉,但实际用起来容易踩坑。
- 仅支持本地数据(
data数组),不支持url远程加载场景 - 加完行后,
table.cache不会自动更新,后续调reload()会丢掉这行 - 如果开启了
height固定高度,新增行可能被截断,需手动调table.resize() - 参数必须是对象,不能是数组;字段名必须和
cols中field完全一致,大小写敏感
示例:
layui.table.addRow('myTable', {
id: Date.now(),
name: '李四',
status: '禁用'
});
真正麻烦的不是加一行,而是加完之后表格还“认得”它——包括排序、导出、选中、分页计数。这些状态分散在不同地方,一动就漏。别指望一个 API 全搞定,得根据你的数据来源和交互深度选方案。

















