layer.tab默认不刷新内容，需禁用原切换事件并绑定自定义click，通过Ajax按需加载；使用data-loaded防重复请求，配合loading提示与错误降级，推荐div替换而非iframe以避免跨域、高度适配等问题。
layer.tab 切换时内容不刷新？默认不支持 Ajax 动态加载
layer 的 layer.tab 是静态渲染模式：所有 tab 内容在弹出层初始化时就一次性写入 dom，切换只是 show/hide，根本不会触发任何加载逻辑。所以你点来点去，内容始终是初始 html，想“按需加载”必须自己接管切换行为。
核心思路是：禁用 layer 默认的 tab 切换绑定，改用自定义点击事件 + 手动调用 layer.getChildFrame 或直接操作 iframe / content 区域，再配合 Ajax 更新内容。
如何禁用 layer 默认 tab 切换并绑定自己的 click 事件
layer 创建 tab 后，会为每个 tab 标签（.layui-tab-title li）绑定内部切换逻辑。你需要在 success 回调里解绑原事件，并重绑自己的逻辑：
layer.tab({
area: ['600px', '400px'],
tab: [
{title: '用户列表', content: '<div id="tab-user"></div>'},
{title: '日志详情', content: '<div id="tab-log"></div>'}
],
success: function(layero, index) {
// 解绑 layer 自带的 tab 切换
layero.find('.layui-tab-title li').off('click');
// 绑定自定义 click：只对未加载过的 tab 发起 Ajax
layero.find('.layui-tab-title li').on('click', function() {
const $this = $(this);
const tabIndex = $this.index();
const $contentDiv = layero.find('.layui-tab-content .layui-tab-item').eq(tabIndex);
// 检查是否已加载过（比如加 data-loaded 属性标记）
if (!$contentDiv.data('loaded')) {
loadTabContent(tabIndex, $contentDiv);
}
// 手动激活 tab（layer 内部状态不同步，需手动补）
$this.addClass('layui-this').siblings().removeClass('layui-this');
$contentDiv.addClass('layui-show').siblings().removeClass('layui-show');
});
}
});
loadTabContent 函数怎么写才不重复请求、支持 loading 状态
这个函数负责实际的 Ajax 加载和 DOM 插入，关键点在于防抖、loading 占位、错误降级：
- 用
data-loading防止快速连点多次触发请求 - 首次加载前插入 loading 提示（比如
<div class="loading">加载中...</div>），成功后替换 - 失败时保留空容器或显示错误提示，避免白屏
- 把返回的 HTML 直接
$contentDiv.html(html)即可，无需额外初始化 layui 组件（除非内容含 form/select 等，需手动form.render()）
示例片段：
function loadTabContent(tabIndex, $target) {
if ($target.data('loading')) return;
$target.data('loading', true).html('<div style="padding:20px;text-align:center;">加载中...</div>');
const urlMap = {
0: '/api/users',
1: '/api/logs'
};
$.get(urlMap[tabIndex], function(res) {
$target.html(res.data || res).data('loaded', true);
// 若新内容含 layui 表单元素，需手动渲染
if (tabIndex === 0 && $target.find('select').length) {
layui.form.render('select');
}
}).fail(function() {
$target.html('<div style="padding:20px;color:#e25a5a;">加载失败，请重试</div>');
}).always(function() {
$target.removeData('loading');
});
}
为什么不用 iframe 方式？iframe 在 layer.tab 里有坑
虽然 layer.tab 支持传入 content: '<iframe src="/page.html"></iframe>'，但问题明显：
- iframe 加载完成时机难监听，
layer.getChildFrame可能取不到 DOM - 父子页面跨域时完全无法通信，Ajax 请求受限
- layer 默认对 iframe 的高度自适应失效，容易出现滚动条嵌套
- 每次切换都重新加载 iframe，无法缓存内容，体验差
所以纯 Ajax + div 内容替换是更可控、更轻量的选择。唯一要注意的是：动态插入的 JS 代码（如 <script>xxx</script>）不会自动执行，如有必要，得用 eval 或创建 script 标签手动注入——但绝大多数场景不需要，Layui 组件都支持后续 render。
真正容易被忽略的是 tab 索引与数据源的映射一致性，以及 data-loaded 状态在 layer 关闭后不会自动清除——如果用户反复打开同一 layer，得在 cancel 或 end 回调里清理，否则下次打开可能误判“已加载”。
