点击表格列触发侧边栏弹窗需配置列event属性并监听tool事件，通过obj.data获取行数据，用layer.open(type:1,offset:'r')实现右滑侧边栏，注意防重复请求、xss防护、移动端适配及关闭清理。
点击表格列触发侧边栏弹窗，关键在 on 事件监听和 layui.layer.open
Layui 表格本身不内置“点击某列弹侧边栏”功能，得靠 on('tool(table-filter)', ...) 或列的 event 配置手动绑定。别指望 lay-event 自动撑开侧边栏——它只发事件，后续全靠你写逻辑。
常见错误是直接在 cols 里写 lay-event="showDetail"，但没配 on('tool(...) 监听，结果点下去完全没反应；或者监听写了，却用 layer.msg() 弹提示，而不是真正打开带内容的侧边栏。
- 必须给目标列加
event: 'detail'（值可自定义，但要和监听时一致） - 侧边栏用
layer.open({type: 1, anim: layer.animUpRight, offset: 'r', area: ['400px', '100%']})实现右滑入效果 - 弹窗内容不能写死，得从
data参数里取字段，比如data.id、data.title - 注意：如果表格启用了
page: true，data是当前页数据，不是原始全量数据，查详情前确认 ID 是否可靠
table.on('tool(table-filter)') 怎么拿到被点击行的完整数据
很多人以为 tr 元素上绑了事件就能直接读 dataset，但 Layui 表格渲染后 DOM 结构复杂，$(this).data() 拿不到原始对象。唯一靠谱的方式是监听 tool 事件时，从回调参数 obj 的 data 属性取值。
示例列配置：
{field: 'title', title: '标题', event: 'detail', style: 'cursor:pointer;'}
对应监听写法：
table.on('tool(test)', function(obj){
if(obj.event === 'detail'){
console.log(obj.data); // ✅ 这才是该行完整数据对象
layer.open({
type: 1,
content: '<div class="side-detail">
<h4>' + obj.data.title + '</h4>
<p>' + obj.data.content + '</p>
</div>',
offset: 'r',
area: ['400px', '100%'],
anim: layer.animUpRight
});
}
});
-
obj.data是当前行原始 JSON 数据，和你传给table.render()的数组元素一致 - 别用
obj.tr去找td:eq(2)再取text()—— 字段可能被格式化过（比如时间戳转成日期），失真 - 如果需要远程加载详情（比如查接口），用
obj.data.id发请求，别把整行数据塞进 URL 传参
侧边栏内容动态加载时，怎么避免重复请求或空白闪动
用户快速连点两下同一行，容易触发两次 layer.open，造成两个侧边栏叠在一起，或接口被重复调用。这不是 UI 问题，是事件控制没做。
- 加节流：用
var lock = false+if(lock) return; lock = true;包住请求和弹窗逻辑，layer.closeAll()后再设lock = false - 弹窗内容区域先放 loading 占位符，比如
<div class="loading">加载中...</div>，等接口返回后再$('.side-detail').html(...) - 别在
content字符串里拼 HTML，尤其含用户输入内容时——XSS 风险。改用success回调里操作 DOM - 如果详情页需表单交互，记得在
layer.open的success回调里初始化form.render()，否则 Layui 表单组件不生效
移动端适配和关闭行为容易被忽略的细节
侧边栏在手机上默认占满屏幕宽度，但 area: ['400px', '100%'] 在小屏下会溢出。更麻烦的是，用户点遮罩层或按返回键时，默认不关闭侧边栏——因为 Layui 的 layer 默认 closeBtn: 1 且 shadeClose: false。
- 加响应式判断：
area: /Android|iPhone|iPod|iPad/i.test(navigator.userAgent) ? ['100%', '100%'] : ['400px', '100%'] - 显式开启遮罩关闭：
shadeClose: true，并确保shade: 0.3（默认是 0.8，太重） - 安卓物理返回键支持需额外监听：
layer.ready(() => { if(layer.index) history.pushState(null, '', location.href); });并配合window.onpopstate关闭，但 Layui 官方不维护这个，建议优先用shadeClose覆盖 - 关闭侧边栏后，记得重置表格选中态（如果用了
checkCol），否则视觉残留
最常漏掉的是：没清空上一次弹窗里的异步状态（比如定时器、未完成的 AJAX）。每次打开新详情前，用 layer.closeAll('page') 或存 layer index 手动关，比依赖用户点叉更稳妥。
