layui.form.reset()无效是因为它只重置HTML硬编码的初始值，对JS动态填充的数据无响应；正确做法是首次赋值后深拷贝缓存initialFormData，再通过form.val()和form.render()还原，并确保重置按钮type="button"。
不能直接用 layui.form.reset()，它只是调用原生 form.reset()，只认 HTML 中写的 value、checked、selected 初始属性，对 JS 动态填入的值完全无效——你看到的“初始值”，大概率是后端返回或 JS 渲染出来的，不是 HTML 硬编码的。
为什么 layui.form.reset() 会把表单清空而不是回到初始值
这个方法本质是触发浏览器原生重置行为。只要你的表单没在 HTML 里写死 value="张三"、checked 或 selected，那 reset 后就是空。比如：
-
<input name="userName" value="">→ reset 后为空字符串 -
layui.form.val('search', { userName: '李四' })填的值 → reset 后照样消失，不保留 - 下拉框选项由 JS 异步加载 → 没有
<option selected>，reset 后 UI 还停在旧选项上（因为原生select根本没初始选中项）
如何正确缓存并还原“JS 填充后的初始状态”
关键是在第一次赋值完成后，立刻深拷贝一份数据，后续重置就靠它。
- 如果你用
layui.form.val('filterName', data)填过表单，就在那行代码后面紧跟：const initialFormData = JSON.parse(JSON.stringify(data)); - 不要用浅拷贝（如
Object.assign({}, data)），嵌套对象会被引用污染 - 如果表单字段部分由服务端直出、部分由 JS 补充（如异步加载的
select选项），那就别依赖 DOM 属性，仍以你传给form.val()的data为准 - 缓存时机必须在
form.render()之后、用户操作之前，否则可能漏掉渲染产生的默认状态
用 form.val() + form.render() 主动还原
有了缓存的 initialFormData，还原就两步，缺一不可：
- 先调
layui.form.val('filterName', initialFormData)—— 把值写回 layui 内部数据层 - 再调
layui.form.render()（或更精准的layui.form.render('select', 'filterName')）—— 刷新 select/radio/checkbox 的 UI 显示 - 如果表单含
laydate，还需额外处理：$('#dateField').val('');+laydateIns && laydateIns.setValue(''); - 若用了
table.reload()加载数据，重置后务必补一句：table.reload('dataTable', { where: {} });，否则表格仍按旧条件查
重置按钮必须是 type="button"，不是 type="reset"
这是最容易被忽略的执行前提。写成 <button type="reset"> 或不写 type，都会触发原生行为，导致 hidden 字段回退到 HTML 初始值、页面意外刷新、或者 layui 组件 UI 完全不同步。
- HTML 中写：
<button type="button" id="resetBtn">重置</button> - JS 中绑定：
$('#resetBtn').on('click', function() { /* 上面两步逻辑 */ }); - 千万别把重置逻辑塞进
form.on('submit(filter)')里——那是提交用的，和重置无关 - 如果搜索区域在 layer 弹窗里，还要确认按钮不会冒泡触发父页面的 form submit
真正麻烦的不是写几行代码，而是得想清楚：你所谓的“初始值”到底来自哪一层——HTML 属性？AJAX 返回？还是用户上次搜索留下的缓存？不同来源，缓存和还原策略完全不同。别等点了重置发现 token 变了、级联下拉卡死、表格还显示旧数据，才回头翻文档。
