element.tabAdd需配合事件委托、参数校验、去重判断和iframe内存清理才能正确使用：菜单点击须委托至父容器；tabAdd参数为filter和options对象，content推荐iframe；id须唯一以支持tab切换；关闭Tab前需清空iframe内存。
element.tabAdd 是核心，但直接调用它不等于能“自动”开 Tab——关键在于监听、去重、动态传参这三步是否闭环。
菜单点击事件必须绑定在 delegate 容器上，不能绑死在静态 a 标签上
左侧菜单常是后台动态渲染或分页后重载的，用 $('a[data-type="tabadd"]').on('click', ...) 会失效。正确做法是委托到父容器（比如 .site-menu）：
- 错误写法：
$('a.site-demo-active').on('click', ...)—— 新增菜单项后事件丢失 - 正确写法：
$('.site-menu').on('click', 'a[data-type="tabAdd"]', function() {...}) - 必须确保
data-url、data-id、data-title三个属性都存在且非空，否则tabAdd会静默失败
element.tabAdd 的三个参数顺序和含义容易搞反
Layui 文档没明确强调参数顺序，但实际签名是 tabAdd(filter, options)，其中 options 是对象，不是三个独立参数。常见错误是写成：
element.tabAdd('demo', 'user-list', '/user/list', '用户列表')
这会报错或打开空白 Tab。正确写法是：
element.tabAdd('demo', {
title: $(this).data('title'),
content: '<iframe src="'%20+%20%24(this).data('url')%20+%20'" frameborder="0" class="x-iframe"></iframe>',
id: $(this).data('id')
});
-
filter必须与 HTML 中lay-filter="demo"的值完全一致（区分大小写） -
content推荐用<iframe></iframe>加载页面，避免 JS 冲突；不要直接写 HTML 字符串拼接路径，防止 XSS -
id必须唯一且稳定（比如后端返回的 menu_code），不能用时间戳或随机数，否则无法做“已存在判断”
点击重复菜单项时，应该切换而非新建 Tab
用户连续点两次“用户管理”，不该打开两个一样的 Tab。需要先查 .layui-tab-title li[lay-id] 是否已存在对应 lay-id：
- 用
$('.layui-tab-title li[lay-id="' + id + '"]').length > 0判断是否存在 - 存在则调用
element.tabChange('demo', id)切换，而不是再tabAdd - 注意：
tabChange不会触发 iframe 重载，如果业务要求每次点击都刷新内容，得手动触发iframe.contentWindow.location.reload() - 别忘了给当前激活的
li加layui-this类，否则样式不同步
Tab 关闭后，iframe 内存未释放是个隐藏陷阱
直接删掉 li 和对应 panel，里面的 iframe 还在后台跑 JS、发请求、占内存。安全做法是：
- 在
tabDelete前，先取到对应iframe元素：var iframe = $('.layui-tab-content .layui-tab-item[lay-id="' + id + '"] iframe') - 执行
iframe[0].contentWindow?.document.write('')或iframe.attr('src', 'about:blank') - 再调用
element.tabDelete('demo', id) - 否则多开几次 Tab 后，页面明显变卡，控制台还可能报
Failed to execute 'write' on 'Document': Cannot write to a document that is still loading
tabDelete 里，也不在 tabChange 里，得你亲手掐断。
