表单字段变化后必须用 form.on('select/filter-name') 等监听子表单显隐，禁用原生 change；子表单容器须独立且不在 layui-form-item 内，隐藏用 style="display:none"；显隐时需同步清空值、操作 lay-verify 属性并单独渲染对应组件。
表单字段变化后如何触发子表单区域显隐
必须用 form.on('select/filter-name') 或 form.on('checkbox/filter-name') 监听，不能绑原生 change 事件。Layui 的 select/checkbox 是重绘的 DOM，原生 input 被隐藏，直接监听会拿不到实时状态。
常见错误是写 layui.$('#my-select').on('change', ...)，结果首次加载或动态渲染后完全不触发。
- select 类型：监听
form.on('select(your-filter)', callback)，data.value是当前选中值 - checkbox 单选：同上，
data.elem.checked可靠 - checkbox 多选组：需遍历
layui.$('input[name="xxx"]:checked')统计数量，不能只信单次data.elem.checked - radio 组：同样用
form.on('radio/filter-name')，data.value是选中项 value
子表单区域怎么组织 DOM 才不被 form.render() 破坏
子表单容器必须是独立的 <div class="subform-container"></div>，且不能嵌套在 <div class="layui-form-item"> 内部——否则 <code>form.render() 可能重置其高度、padding 或触发样式抖动。
初始状态推荐用 style="display:none"，而不是 layui-hide。因为 layui-hide 依赖全局 CSS，某些主题或自定义样式可能覆盖它，导致隐藏失效。
- 容器加唯一 ID 或 data-id，方便 JS 定位：
<div id="subform-{{d.type}}" class="subform-container" style="display:none">...</div> - 不要把子表单 HTML 写死在主表单 HTML 里，尤其是带
lay-verify的输入框——隐藏后仍参与校验 - 若子表单含 select/checkbox，显隐后需单独调用
form.render('select')或form.render('checkbox')，不能只调form.render()
隐藏时怎么避免校验失败和值残留
单纯 display: none 不影响 form.val() 和 form.verify()，有 required 规则的字段即使不可见也会报错。
正确做法是三步：清空值 → 移除校验属性 → 隐藏容器。恢复时反向操作：设回值 → 补全 lay-verify → 显示容器。
- 隐藏时：
layui.$('#target-input').val('').attr('lay-verify', '') - 显示时：
layui.$('#target-input').attr('lay-verify', 'required|phone')（按需还原） - 如果子表单含多个字段，建议封装一个
hideSubform(id)函数统一处理 - 避免用
form.val('filter', {})批量赋空——它不会移除lay-verify，下次提交照样校验
多级联动时怎么避免重复渲染和事件冲突
当 A 选项控制 B 区域，B 区域内又有下拉框控制 C 区域，容易出现：B 显隐后 C 的事件监听丢失、C 的值被重置、或多次调用 form.render() 导致卡顿。
关键是在每次显隐后，只对新暴露的子区域做最小范围重渲染，且确保事件监听器不重复绑定。
- 给每个子表单容器加唯一 class，如
subform-level-2，渲染时限定范围：form.render(null, 'subform-level-2') - 监听器统一用事件委托挂载到父容器，而不是每次显示都重新
form.on() - 用
layui.$(container).data('rendered', true)标记是否已渲染过，避免重复执行 - 如果子表单含异步加载（如远程 select 选项），显隐时要 cancel 上一次请求，防止回调覆盖
lay-verify 属性，导致提交校验失败；以及子区域内的组件未单独 form.render()，造成样式或交互异常。这两处不处理，功能看似正常，一到提测就暴露。
