必须用 table.on('tool(filter)', callback) 监听 tool 事件，lay-event 仅发信号；侧边栏用 layer.open({type: 1, offset: 'r'}) 实现，配合安全取值、防抖、热区优化及重载时关闭旧弹窗。
列点击事件必须用 tool 事件监听，不能靠 lay-event 自动触发
很多人在 cols 里写 lay-event="detail" 就以为点一下会自动弹窗，结果完全没反应——lay-event 只是发一个事件信号，不带任何逻辑。真正干活的是 table.on('tool(filter)', callback) 这个监听器。
实操要点：
- 目标列必须配置
event: 'detail'（值可自定义，但要和监听器里一致） -
filter是你在table.render()中设置的id或elem对应的唯一标识，比如userTable - 监听函数的
obj.data才是当前行完整数据，别试图从 DOM 里取$(this).data()，Layui 渲染后 DOM 没挂原始对象 - 如果表格启用了分页，
obj.data是当前页的数据，ID 是否唯一、能否用于查详情，得提前确认
弹窗用 layer.open({type: 1, offset: 'r'}) 实现右滑侧边栏
别用 layer.msg() 或 alert()，它们只是提示框；也别用 type: 2 加载 iframe 页面，那样不是“侧边栏”，而是嵌套页面，样式难控、调试麻烦、移动端易出错。
实操建议：
-
type: 1表示内嵌 HTML 内容，配合offset: 'r'实现从右侧滑入效果 -
area: ['400px', '100%']控制宽度和高度，适配移动端时可改用['80%', '100%'] - 内容不要拼字符串，推荐用隐藏
<script type="text/html"></script>模板，再用layui.laytpl()渲染，避免 XSS 和引号嵌套混乱 - 关闭时务必调用
layer.close(index)，别依赖右上角按钮——它可能被弹窗内容遮挡或 CSS 覆盖
字段取值要防坑：别直接用 obj.data.xxx，先检查是否存在
常见错误是写 obj.data.title 或 obj.data.id，结果某条数据里没这个字段，JS 报错导致整个弹窗打不开。Layui 不保证每行数据结构完全一致，尤其服务端返回字段有缺失时。
安全做法：
- 用
obj.data?.id ?? ''（可选链 + 空值合并）或obj.data.id || '' - 如果字段是嵌套路径（如
user.profile.name），别硬写obj.data.user.profile.name，改用layui.$.get(obj.data, 'user.profile.name', '')或手写安全取值函数 - 时间字段（如
create_time）常是字符串或Date对象，渲染前统一转成格式化字符串，避免toString()出现Invalid Date - 含 HTML 的字段（如富文本描述）若要显示，必须用
layui.$('<div></div>').text(htmlStr).html()转义，否则执行脚本
移动端点击区域小、易误触，得加防抖和显式反馈
在手机上点一列文字，经常点不中或连点两次，导致弹窗反复打开、请求重复发送。这不是 UI 问题，是交互逻辑缺防护。
关键处理：
- 给点击动作加简单防抖：
if (window.detailLock) return; window.detailLock = true; setTimeout(() => { window.detailLock = false; }, 300); - 点击后立即给目标单元格加
layui-bg-gray类做视觉反馈，300ms 后移除 - 禁用
cell上的长按菜单（iOS/Android 默认行为），加oncontextmenu="return false"或 CSS-webkit-touch-callout: none; - 如果列内容过短（如状态码“1”、“2”），用
templet包一层<span style="display:block;padding:8px;">{{d.status}}</span>扩大热区
layer.open() 前，记得先 layer.close(layer.index) 或存个全局 index 变量手动关掉。
