Layui table 数据不会自动提交到表单,需手动将 table.cache['id'] 数据序列化为隐藏字段;注意 edit 事件后 cache 更新延迟、空数据处理及 templet 列必须配置 field 才能进缓存。
layui table 的数据默认不会自动提交到 Form 表单中
layui 的 table.render() 生成的是纯前端渲染的 dom 表格,和传统 <form> 内的 <input> 无绑定关系。直接点 submit 按钮,表单只会提交它内部原生控件(如 input、select)的值,表格里编辑过的数据一个都不会带上。
必须手动把表格数据序列化为隐藏字段或动态插入 input 元素
常见做法是监听表格编辑行为(比如用 table.on('edit') ),实时更新对应行的隐藏输入框;或者在表单提交前统一收集所有行数据,拼成 JSON 字符串塞进一个 <input type="hidden">。推荐后者,更可控、不易漏数据。
- 用
table.cache['yourTableId']获取当前表格全部缓存数据(含编辑后未刷新的变更) - 确保每行有唯一标识(如
id字段),否则后端无法区分增删改 - 不要依赖
table.getData()—— 它只返回原始渲染数据,不包含用户编辑内容 - 示例:在
form.on('submit')中插入
form.on('submit', function(data){
var tableData = table.cache['myTable'];
var hiddenInput = document.querySelector('input[name="tableData"]');
if (!hiddenInput) {
hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'tableData';
data.field.form.appendChild(hiddenInput);
}
hiddenInput.value = JSON.stringify(tableData);
return true; // 继续提交
});如果表格支持行内编辑,需确保 edit 事件触发后数据已写入 cache
Layui 的 table.on('edit') 是异步触发的,但 table.cache 在事件回调执行完毕后才更新。所以如果你在 edit 回调里立刻读 table.cache,可能拿不到最新值。稳妥做法是:
- 在
edit回调末尾加个微任务延迟读取:setTimeout(() => { /* 读 cache */ }, 0) - 或直接从
data参数里取当前单元格新值(data.value),再手动合并到本地缓存对象 - 避免在 edit 中直接修改
table.cache—— 容易和 layui 内部状态冲突
后端接收时注意 JSON 解析与空数组/空对象边界
前端传过来的 tableData 是 JSON 字符串,后端解析后大概率是数组。但要注意:
- 如果表格为空,
table.cache['xxx']返回空数组[],JSON 后仍是[],不是null或undefined - 若某列值是空字符串、
null或数字0,Layui 不会过滤,都会原样进 cache - 后端反序列化后,务必校验数组长度和每项结构,防止前端恶意构造畸形数据
真正容易被忽略的是:表格列配置里用了 templet 自定义内容,但没在 cols 中设 field —— 这种列的数据根本不会进 table.cache,也不会被提交。必须保证每列都有可映射的 field 名,且和后端字段对得上。


















