不能。table.reload() 会清空并重载整个表格,无法直接追加行;需通过 table.cache 获取当前数据并 push 新行后调用 table.reloadData() 实现局部刷新,或手动操作 tbody 插入 DOM。
layui table.reload() 无法直接追加行?
不能。table.reload() 是重载整个表格,会清空现有数据并重新渲染,不是“追加”。想在已渲染的表格末尾加一行,得绕过重载逻辑,走 dom 操作或表格实例的底层方法。
用 table.cache 获取当前数据再 push
table.cache 是 layui 表格内部维护的原始数据缓存(以 tableId 为 key 的对象),它反映的是当前表格实际显示的数据(含分页过滤后的内容)。只要你知道表格的 id(即 table.render() 时传的 id 值),就能读取、修改它:
- 先查
table.cache['yourTableId'],确认它存在且是数组 - 用
.push()添加新数据对象(字段必须和原列field严格一致) - 调用
table.reloadData('yourTableId')(注意:不是reload())触发局部刷新
示例:
var newRow = {id: 100, username: '张三', email: 'zhang@example.com'};<br>var cache = table.cache['userTable'];<br>if (Array.isArray(cache)) {<br> cache.push(newRow);<br> table.reloadData('userTable'); // 仅重绘 body,不重发请求<br>}
手动插入 tr 并绑定事件(适合简单场景)
如果只是临时展示、不涉及排序/筛选/导出等高级功能,可以直接操作 tbody:
- 用
table.get('yourTableId')获取表格实例,拿到config.elem对应的容器 - 找到其
tbody,用innerHTML += '...'或insertAdjacentHTML插入一行(需按列顺序拼td) - 注意:新行不会自动有斑马纹、hover 效果、复选框状态;如用了
toolbar或event列,要手动绑定事件
关键点:table.get('userTable').config.elem.next('.layui-table-box').find('tbody') 才是真实渲染区域,直接插到原始 elem 的 tbody 里可能无效。
reload 时传入 data 参数并保留旧数据?
可以但不推荐。虽然 table.reload() 支持 data 参数,但你要自己维护全量数据(包括已加载的页、用户手动删掉的行等),容易和前端状态脱节。尤其开启 page: true 后,data 会被当成本地分页数据源,和接口返回逻辑冲突。
真正需要“动态追加 + 分页兼容”的场景,建议后端支持增量查询(比如带 last_id 参数),前端 reload 时只拉新数据,再合并进 table.cache —— 这个合并动作本身,才是追加的核心,不是 reload。
最常被忽略的是:没检查 table.cache 是否为空数组或 undefined,一 push 就报错;还有字段名大小写、空值(null/undefined)导致单元格空白却不报错,排查起来反而更费时间。











