Layui表格行点击事件必须用on('row(table)')委托绑定，因表格动态渲染；日志区需独立容器并手动清空填充；日志应异步按行ID加载；CSS用sticky实现贴底效果，避免fixed定位冲突。
表格行点击事件绑定必须用 on('row(table)') 而非 on('click')
直接给 tr 绑 click 会失效，因为 layui 表格是动态渲染的，原生 dom 事件监听不到后续插入的行。layui 提供了语义化事件委托机制：on('row(table)') 才能稳定捕获每行点击。
实操建议：
- 确保在
table.render()完成后，再调用table.on('row(table)', ...) - 回调函数中通过
obj.data拿到当前行完整数据，这是后续查日志的关键依据（比如取id或log_key） - 别漏掉
obj.tr—— 后续可用来高亮当前选中行，避免用户迷失焦点
底部日志区域必须用独立容器 + 手动清空再填充
Layui 表格本身不提供“底部固定日志面板”能力，得自己在页面底部加一个带固定高度和滚动的 div，并用 JS 控制内容更新。强行塞进表格 footer 或用 done 回调渲染会导致布局错乱或重复追加。
实操建议：
- HTML 中提前定义好容器：
<div id="log-panel" style="height: 120px; overflow-y: auto; border-top: 1px solid #eee; padding: 8px; font-size: 12px;"></div>
- 每次点击行时，先执行
document.getElementById('log-panel').innerHTML = ''，再用循环拼接日志项，避免历史内容残留 - 日志项建议用
<p><small>[2024-05-20 14:22] 张三 修改了价格：199 → 299</small></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="overflowclass">深蓝色网站后台管理系统layui框架模板-AdminPro</a> <p class="overflowclass">一款深蓝色网站后台管理系统layui框架模板</p> </div> <a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>结构，语义清晰且易控制行高
日志数据获取应走异步请求而非前端预加载
修改日志通常条数多、字段杂，且敏感操作需权限校验，不能把所有日志随表格数据一起返回。必须在点击后按行 ID 实时拉取，否则内存占用高、首屏慢、还可能暴露未授权数据。
实操建议：
- 接口设计推荐 RESTful 风格，如
/api/log?target_type=order&target_id=123，后端按类型+主键查关联日志 - 请求前加个简单防抖（比如 300ms 内重复点击只发一次），避免快速连点触发多次请求
- 失败时在
#log-panel显示<small style="color:#f50">加载日志失败，请重试</small>，别留白或报错弹窗打断流程
固定定位与表格滚动需手动处理样式冲突
当表格内容多出现纵向滚动条时，底部日志区若用 position: fixed，会脱离文档流，导致其位置相对于视口而非表格容器，容易遮挡表格内容或错位。正确做法是让日志区作为表格父容器的最后一个子元素，并用 CSS 控制“视觉固定”效果。
实操建议：
- 把
#log-panel放在table的外层div内部末尾，同级于table标签 - CSS 加上：
#log-panel { position: sticky; bottom: 0; background: #fff; z-index: 10; }，配合父容器overflow-y: auto即可实现“随表格滚动但始终贴底” - 务必测试不同分辨率下是否出现横向滚动条挤压日志区宽度，必要时加
max-width: 100%和box-sizing: border-box
sticky 在 Safari 旧版本里行为不一致，上线前得真机验证。
