调用 element.tabAdd() 前须确保三件事：容器 DOM 存在且 lay-filter 匹配；在 layui.use(['element'], callback) 回调内执行；参数对象含合法 id、title 及 content 或 href。
调用 element.tabAdd() 新增 Tab，关键不是“怎么写那行代码”，而是确保三件事提前就位：容器存在、模块加载完成、参数合法。漏掉任一环，都会静默失败或报错 Cannot read property 'tabAdd' of undefined。
容器 DOM 必须已存在且带正确 lay-filter
右侧选项卡区域必须是一个已渲染的 <div class="layui-tab">，且明确声明 lay-filter="xxx"（比如 lay-filter="mainTabs"）。这个值就是后续所有 API 的“定位钥匙”——tabAdd('mainTabs', {...}) 中的字符串必须和它完全一致。如果 HTML 里写的是 lay-filter="demo"，但 JS 调用传了 'mainTabs'，就不会报错，也不会渲染，页面毫无反应。
必须在 layui.use 回调内执行
Element 模块不是全局自动可用的，得显式加载。不能把 element.tabAdd(...) 写在 layui.use 外面，也不能放在 $(document).ready() 里就直接调。正确姿势是：
- 确保已引入
element模块：layui.use(['element'], function(){...}) - 所有
tabAdd、tabDelete、tabChange都写在这个回调函数内部 - 如果菜单是异步加载的（比如从接口拉取），也要等菜单 DOM 插入后再触发 tabAdd
参数对象至少包含 id、title 和 content 或 href
第二个参数是配置对象，三个字段缺一不可：
-
id：字符串，全局唯一，建议用业务语义命名（如
'user-detail-1001'），别用时间戳或随机数——否则无法识别重复页、也无法精准删除或切换 -
title：选项卡顶部显示的文字，支持 HTML 字符串（如
'订单详情 <span style="color:#ff5722">[已支付]</span>'） -
content 或 href：二选一。推荐用
href: '/user/profile?id=1001'，Layui 会自动创建 iframe 加载；若用content，需传完整 HTML 字符串，注意引号转义和 XSS 风险
绑定菜单点击时要用事件委托
左侧菜单常是动态生成的（权限控制、分页、刷新后重绘），直接给 a 标签绑 .on('click') 会失效。应委托到父容器上，并校验必要属性：
- HTML 中每个菜单项带上
data-id、data-title、data-url - JS 绑定写成：
$('.menu-container').on('click', 'a[data-id]', function(){...}) - 点击前先检查这三个 data 属性是否都非空，缺失就跳过，避免静默失败
