Layui Tab需手动实现LRU式自动替换：设定最大数量（如6个），维护tabOrder数组记录添加顺序，超限时shift删除队首最旧Tab并add新Tab，同时用tabCache缓存内容，最后tabChange激活新页。
Layui Tab 本身不内置“自动替换最旧 Tab”的机制，需手动控制打开数量并实现 LRU（最近最少使用）式替换逻辑：当新 Tab 要添加且已达上限时，删除第一个（即最早添加的）Tab，再插入新 Tab。
1. 设定最大数量并记录 Tab 添加顺序
关键在于维护一个按添加时间排序的 ID 队列（如数组），每次调用 element.tabAdd() 后把新 lay-id 推入队尾。这样队首始终是最旧的 Tab 标识。
- 初始化一个全局数组，例如 const tabOrder = [];
- 每次成功添加 Tab 后执行 tabOrder.push(newId);
- 避免重复添加相同 id：插入前先用 tabOrder.includes(id) 判断是否已存在
2. 添加前检查并触发替换逻辑
在调用 tabAdd 前，先判断当前已打开 Tab 数量（可用 $('.layui-tab-title li').length 获取）是否 ≥ 最大值（如 8）。若是，则取出队首 id，执行「删旧建新」流程：
- 用 element.tabDelete(filter, oldestId) 删除最旧 Tab
- 从 tabOrder 中 .shift() 移除该 id
- 再执行 element.tabAdd(...) 添加新 Tab
- 最后 tabOrder.push(newId) 更新顺序
3. 注意内容复用与激活状态处理
被删的 Tab 若是当前激活项，tabDelete 会自动跳转到上一个；但新 Tab 添加后不会自动激活——需手动调用 element.tabChange(filter, newId) 切换过去。
- 若原 Tab 内容是 iframe，建议保留其 src 或 DOM 结构，避免重复加载
- 可提前缓存每个 Tab 的 title 和 content（如用对象 tabCache[id] = {title, content}）
- 删除前不必手动保存状态，只要 content 是静态 HTML 或已抽离业务逻辑即可
4. 完整轻量示例（限制最多 6 个 Tab）
假设容器为 <div id="tabBox" lay-filter="tabBox"></div>：
const MAX_TABS = 6;
const tabOrder = [];
const tabCache = {};
function addTabSafely(opts) {
const { id, title, content } = opts;
// 已存在则直接切换
if (tabOrder.includes(id)) {
return layui.element.tabChange('tabBox', id);
}
// 超限时删最旧
if ($('.layui-tab-title li').length >= MAX_TABS) {
const oldest = tabOrder.shift();
layui.element.tabDelete('tabBox', oldest);
delete tabCache[oldest];
}
// 添加新 Tab 并记录
layui.element.tabAdd('tabBox', { id, title, content });
tabOrder.push(id);
tabCache[id] = { title, content };
// 自动切换到新 Tab
layui.element.tabChange('tabBox', id);
}
调用时只需 addTabSafely({id: 'user-1001', title: '张三档案', content: '<div>...</div>'}) 即可。
