layui表单重置需组合操作:form.val()设空值+form.render()刷新ui,upload需清files数组、dom列表并reload,table需reload传空where。

提交后直接调用 form.reset() 不行,Layui 表单组件(select、checkbox、upload 等)不响应原生重置,必须组合操作才能真正“清空 UI + 同步状态”。
form.reset() 只清原生 input,Layui 组件全失效
你写 $("#myForm")[0].reset() 或 document.getElementById("myForm").reset(),确实能清掉 <input type="text"> 和 <textarea></textarea> 的值,但以下组件完全没反应:
-
<select lay-filter="xxx"></select>:下拉框文字不变,内部选中状态仍保留 -
<input type="checkbox">:勾选状态不消失,form.val()读出来还是旧值 <div id="uploadDemo">:已选文件列表纹丝不动,实例里的 <code>files数组照常存在根本原因是 Layui 把这些控件的“真实状态”存在 JS 实例里,和 DOM value 属性解耦了。
正确重置 select / checkbox / radio
必须用
form.val()写空值,再调form.render()刷新 UI:- 对单个 select:先
form.val('filterName', { 'province': '' }),再form.render('select', 'filterName') - 对多选 checkbox:传空数组
form.val('filterName', { 'tags': [] }),再form.render('checkbox') - 想一键清所有字段:用
form.val('filterName', {}),但只影响你在form.render()时注册过的 name 属性 - 注意:
form.render('select', 'filterName')第二个参数必须和<form lay-filter="filterName"></form>一致,否则无效
upload 组件必须手动清 files + reload
form.reset()或设<input type="file">.value = ''都无效——现代浏览器禁止 JS 修改 file input 的 value,且 Layui upload 完全接管了文件队列。- 必须提前保存 upload 实例:
let uploadInst = upload.render({ elem: '#uploadDemo', ... }) - 在提交成功回调里执行:
uploadInst.files = [];→ 清空 JS 内部队列 - 接着清 DOM 列表:
uploadInst.config.elem.next('.layui-upload-list').html(''); - 最后强制重绘:
uploadInst.reload(); - 别漏掉
reload(),否则 UI 不刷新,用户还能看到旧文件名
重置后表格搜索要同步清 where 参数
如果你的表单是搜索区域,重置 UI 后不处理表格,下次点“搜索”还会带着旧条件发请求。
- 调
table.reload('tableId', { where: {}, page: { curr: 1 } }),显式传空where -
page: { curr: 1 }很关键——否则表格会继续从当前页码加载,不是从第一页开始 - 不要依赖
table.clearCache(),它不重置where缓存;只有reload()传参才真正覆盖 - 如果用了级联 select(如省市区),必须把所有关联字段都设为空值,否则
where里还留着上一次的 province ID
最易被忽略的是 upload 实例的
files属性和 table 的where缓存——这两处不手动干预,表面看“清空了”,实际数据还在内存里等着下次提交。- 对单个 select:先











