Layui Tab 无内置数量限制，需手动控制：新增前检查当前数量，超限（如10个）则删除最旧Tab（FIFO），再添加新Tab；统一封装openTab函数，确保ID唯一、避免重复添加，并清理对应iframe防内存泄漏。
layui 的 Tab 选项卡本身不内置最大数量限制功能，需要手动在添加新 Tab 时做判断和控制。核心思路是：每次点击菜单或触发新增 Tab 前，先检查当前已打开的 Tab 数量，超过设定上限（如 10 个）就关闭最旧的一个（或按需关闭某个），再添加新的。
监听页面添加 Tab 的触发逻辑
通常你是在点击左侧菜单、按钮或通过 JS 调用 element.tabAdd() 来新增 Tab。所有新增入口都应统一走一个封装函数，便于集中控制：
- 不要直接调用
element.tabAdd(...)，而是调用自定义函数如openTab({id, title, url}) - 该函数内部先获取当前 Tab 页签列表：
var tabs = element.tab('getTabList') || []（注意 layui 2.8+ 支持getTabList，低版本需自行维护数组） - 若
tabs.length >= 10，则执行关闭逻辑
关闭最旧 Tab（FIFO 策略）
layui Tab 的 DOM 结构中，每个 tab 标签的 lay-id 属性对应唯一标识，且默认添加顺序与 DOM 顺序一致。可利用这个特性关闭第一个（最左侧/最早添加的）Tab：
- 获取第一个 tab 的
lay-id：var firstId = $(elemTabs[0]).attr('lay-id')（elemTabs是.layui-tab-title li集合） - 调用
element.tabDelete('tabFilter', firstId)删除它 - 注意：删除后需手动触发一次
element.tabChange('tabFilter', newId)切换到新 Tab，否则可能焦点异常
避免重复 ID 和缓存干扰
如果多个菜单项打开相同 URL 或 ID，可能导致 Tab 无法正常切换或重复添加：
- 确保每个 Tab 的
id唯一（建议用 URL + 参数哈希，或时间戳拼接） - 在
openTab函数开头加判断：if (tabs.some(t => t.id === id)) { element.tabChange('tabFilter', id); return; }，即已存在则直接切换，不新增 - 删除 Tab 后，对应 iframe 或内容区若未销毁，可能造成内存泄漏；建议在
tabDelete后手动移除对应 iframe：$('iframe[lay-id="' + id + '"]').remove()
完整简易示例（适配 layui 2.8+）
放在 layui.use(['element'], ...) 回调内：
function openTab(opt) {
const { id, title, url } = opt;
const filter = 'tabFilter';
const tabs = element.tab('getTabList') || [];
if (tabs.length >= 10) {
const first = tabs[0];
element.tabDelete(filter, first.id);
// 清理对应 iframe（如有）
$('iframe[lay-id="' + first.id + '"]').remove();
}
// 检查是否已存在
if (tabs.some(t => t.id === id)) {
element.tabChange(filter, id);
return;
}
// 添加新 Tab
element.tabAdd(filter, {
id: id,
title: title,
content: '<iframe src="'%20+%20url%20+%20'" lay-id="' + id + '" frameborder="0" class="x-iframe"></iframe>'
});
element.tabChange(filter, id);
}
