必须用DOM容器注入方式在layui弹窗中嵌入动态组件：先在body末尾添加隐藏占位容器，layer.open时用type:1+content传该DOM节点，在success回调中清空并注入HTML，立即初始化Layui模块，再异步加载数据并二次render。
需要在layui弹窗中嵌入可交互的动态组件（如表单、树形选择器、图表），而不是静态HTML文本？必须绕过layer默认的content字符串渲染机制，改用DOM容器注入方式。
准备一个空的DOM容器作为弹窗内容载体
在页面任意位置（通常放在body末尾）添加一个隐藏的
<div id="dynamic-layer-container" style="display:none;"></div>。
这一步不可跳过——layer若直接用字符串content渲染，所有绑定在元素上的事件监听、Vue/React实例、Layui组件（如form、tree、table）都会失效或无法初始化。
用type:1 + content传DOM节点而非字符串
调用layer.open()时，将content设为jQuery对象或原生DOM节点：content: $('#dynamic-layer-container')。
【必须确保#dynamic-layer-container在调用前已存在于DOM中】，否则layer会报错或显示空白。不能在open回调里才append这个容器。
在success回调中动态加载并初始化组件
第一步：清空容器并注入新结构：$('#dynamic-layer-container').empty().html('<form class="layui-form"><select lay-filter="role-select"></select></form>');
第二步：立即初始化Layui表单模块：layui.form().render('select');。注意：必须在HTML注入后立刻执行，延迟哪怕1ms都可能导致下拉框不渲染。
第三步：异步加载选项数据并追加到select：$.get('/api/roles', function(res) { $('#dynamic-layer-container select').append(res.map(r => <option value="${r.id}">${r.name}</option>).join('')); layui.form().render('select'); });。这里两次render是必要的——第一次渲染空select，第二次渲染带选项的select。
进阶：加载含完整生命周期的独立模块
方法一：用iframe隔离加载外部页面
直接把content设为'<iframe src="user-edit.html" frameborder="0" style="width:100%;height:400px;"></iframe>'。iframe内可自由使用layui、Vue、Axios，完全不受父页面干扰。
方法二：用jQuery.load加载HTML片段并手动绑定
先注入空容器：$('#dynamic-layer-container').load('components/user-form.html', function() { layui.form().render(); layui.tree({elem: '#permission-tree', data: [...] }); });。注意：load回调里必须显式调用所有依赖组件的初始化方法。
方法三：用template + render函数动态生成带事件的DOM
定义script模板：<script type="text/html" id="form-tpl"><button class="layui-btn submit-btn">提交</script>，然后在success中：$('#dynamic-layer-container').html(jquery.render($('#form-tpl').html())); $('.submit-btn').on('click', handleSubmit);。这一步要自己管好事件解绑，避免重复绑定。
