Layui Tab容器不支持hide/show方法，需用DOM操作隐藏面板，但须避免样式冲突和事件失效；切换时需调table.resize()修复表格宽度；禁用关闭需拦截tabDelete事件；表单验证失效需动态管理lay-verify属性并重渲染。
Tab容器本身不支持 hide/show 方法
layui 的 element.tabchange() 只能切换激活项，不能隐藏整个 tab 容器；element 模块压根没提供 hidetab() 或类似 api。想让某个 tab 面板不可见，得靠 jquery 或原生 dom 操作，比如 $("#tab-panel-id").hide()。
常见错误现象：直接给 .layui-tab-item 加 display: none 样式，或用 element.init() 试图“重初始化”——结果是 tab 切换失效、内容错位、甚至 JS 报错 Cannot read property 'children' of null。
- 隐藏前，先确保目标面板没被设为
layui-show类，否则样式冲突 - 隐藏后若要恢复交互（比如再次点击 tab 标题时显示），必须手动调
element.init()或重新绑定事件 - 如果 tab 内含表单元素（
input、select等），隐藏后记得后续显示时调form.render()，否则验证逻辑丢失
切换 Tab 时表格宽度错乱？必须调 table.resize()
选项卡配合 layui.table 是高频踩坑场景：默认只显示第一个 tab，其余 .layui-tab-item 被 hide()，等切到第二项时，表格列宽塌缩、文字挤成一团——这是因为表格在隐藏状态下无法正确测量容器宽度。
解决方式不是给列加固定 width（会破坏响应式），而是监听 tab 切换，在显示目标面板后立刻触发重绘：
$(".layui-tab-title li").on("click", function() {
const index = $(this).index();
$(".layui-tab-content .layui-tab-item").eq(index).show().siblings().hide();
// 必须加这句，且不能放在 setTimeout 里（除非你确认渲染延迟）
layui.table.resize();
});
- 如果是用
element.tabChange()触发的切换，需在回调里手动调table.resize() - 表格若启用了
autoSort: true，resize()不影响排序状态，放心用 - 不要对
th或td单独 hide/show，整列操作才安全
动态控制某 tab 面板是否可关闭
Layui 默认所有 tab 都带删除图标（×），但有些系统页签（如首页、欢迎页）不允许关闭。这不是靠 CSS 隐藏 × 图标就能解决的——用户仍可通过右键菜单或快捷键关闭。
真正生效的做法是：在添加 tab 时，用 lay-id 标识关键页，并在 tabDelete 事件中拦截：
element.on('tabDelete(yourFilter)', function(data){
if(['home', 'welcome'].includes(data.id)) {
return false; // 阻止关闭
}
});
-
data.id对应<li lay-id="home">中的值，不是索引 - 别漏写
lay-filter值（比如yourFilter），否则事件监听不生效 - 拦截后，建议用
layer.msg('首页不可关闭')给用户明确反馈
隐藏 tab 后再 show()，表单验证失效怎么办
这是最隐蔽的问题：tab 面板里有带 lay-verify 的输入框，隐藏后再 show()，提交时该字段完全不校验——因为 Layui 表单模块只在初始化时扫描 lay-verify 属性，后续 DOM 显隐不会触发重解析。
正确做法不是反复调 form.render()，而是显隐时同步管理验证属性：
- 隐藏前：
$target.removeAttr('lay-verify').attr('data-required', $target.attr('lay-verify')) - 显示后：
$target.attr('lay-verify', $target.attr('data-required')).removeAttr('data-required') - 最后统一调一次
form.render()，确保样式和事件都就位
注意：如果 tab 内含 layedit、upload 等独立模块，它们的初始化也得在 show 后手动补上，比如 layedit.build('editor-id')。
