Layui Tab 选项卡需手动添加统计区域并监听增删事件实现“已打开X个”显示：在layui-tab容器内插入计数span，用element.on监听tabAdd/tabDelete事件，初始化时统计li数量并动态更新，还可限制最大打开数及防重复添加。

Layui 的 Tab 选项卡默认只显示标题文字，不自动在标题栏右侧显示“已打开 X 个”这类统计信息。要实现这个效果，需手动监听 tab 的增删事件，并更新标题区域的 DOM。

1. 给 tab 容器添加自定义标题栏结构

在 layui-tab 的容器内，手动插入一个用于显示总数的 span，放在 layui-tab-title 右侧（推荐用 flex 布局对齐）：

<div class="layui-tab" lay-filter="demo">
  <ul class="layui-tab-title">
    <li class="layui-this">首页</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
  </div>
  <div class="tab-count-info" style="margin-left: auto; padding: 0 15px; line-height: 40px; color: #999;">共 1 个</div>
</div>

2. 监听 tab 添加和删除事件

使用 layui 的 element 模块监听 tab 的增删行为，实时更新计数：

• 调用 element.on('tabAdd(demo)', ...) 捕获新增动作
• 调用 element.on('tabDelete(demo)', ...) 捕获关闭动作
• 每次触发后，用 $('#tab-count').text(当前 tab 数量) 更新显示

获取当前 tab 数量的方法：遍历 $('.layui-tab-title li') 的长度，或维护一个全局变量 let tabCount = 1 并在增删时同步加减。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

3. 初始化时确保计数准确

页面加载后，tab 标题可能已有多个 li，不能只靠事件计数。建议初始化时先统计一次：

const initTabCount = $('.layui-tab-title li').length;
$('#tab-count').text(initTabCount);

后续再通过事件动态维护，避免因初始状态未捕获导致数字错误。

4. 可选：限制最大打开数量并禁用重复添加

实际项目中常需防止单页打开过多 tab，可结合菜单点击逻辑做判断：

• 点击菜单前先检查是否已存在同 id 的 tab（用 element.tabExists('demo', 'user-list') 或自行查 li[data-id]）
• 若已存在，直接 element.tabChange('demo', 'user-list')
• 若未存在且当前数量已达上限（如 8 个），提示用户并 return