Layui表格需用事件代理实现hover显示操作按钮：在done回调中监听tbody的mouseenter/mouseleave，通过.find('.opt-btns').removeClass/addClass('layui-hide')控制显隐，并加200ms防抖避免误触。
表格行 hover 时动态显示操作列按钮
layui 的 table.render() 默认不支持 hover 显示隐藏按钮，因为其单元格内容在渲染后是静态 html，且表格重绘会清空手动插入的 dom。必须用事件代理 + 动态 class 控制显隐，不能直接写 :hover css（表格有复用行机制，hover 状态会错乱）。
核心思路：给操作列单元格加唯一标识，监听表格容器的 mouseenter/mouseleave，通过事件委托定位当前行，切换该行中按钮容器的 layui-hide 类或自定义显隐类。
- 操作列模板里不要用
v-if或ng-show—— Layui 是纯 JS 渲染，不识别前端框架指令 - 按钮容器必须包裹一层带固定 class 的元素，例如
<div class="opt-btns">...</div>，否则无法精准控制 - 不要给
td直接绑定onmouseover—— 表格滚动/分页后事件会丢失
正确写法：用 table.on('row') + 自定义 class 控制显隐
Layui 提供了 table.on('row(demo)') 这类行事件，但它只响应点击，不响应 hover。真正可靠的是监听表格主体容器的原生事件，并结合 e.target 和 closest('tr') 定位：
关键点：done 回调里绑定事件，确保 DOM 已就绪；.opt-btns 是你可控的封装层；layui-hide 是 Layui 内置的 display:none 类，兼容性好。
为什么不能用 CSS :hover 直接控制按钮？
因为 Layui 表格启用了「行复用」机制（尤其在开启 height 和滚动时），tr 元素会被反复移入移出 DOM，导致 :hover 状态残留或错位。你 hover 第 3 行，可能第 12 行的按钮也显示了——这是真实发生过的典型问题。
- CSS
tr:hover .opt-btns在虚拟滚动下完全不可靠 - 如果表格列宽变化、启用排序、或调用
table.reload()，CSS 规则会失效 - Layui 2.8+ 对
toolbar模板做了懒渲染，未展开的行甚至没有生成按钮 DOM，:hover 找不到目标
进阶：需要延迟隐藏避免误触怎么办？
鼠标快速划过时，mouseleave 立即触发会导致按钮闪退。加个防抖即可：
var hideTimer;
$table.on('mouseenter', 'tr', function(){
clearTimeout(hideTimer);
$(this).find('.opt-btns').removeClass('layui-hide');
}).on('mouseleave', 'tr', function(){
var $that = $(this);
hideTimer = setTimeout(function(){
$that.find('.opt-btns').addClass('layui-hide');
}, 200); // 200ms 延迟隐藏
});
这个延时值要平衡体验和准确性：太短（500ms）会让用户觉得按钮“卡住”。200ms 是多数场景下的合理值。
记住：Layui 的表格不是 Vue/React，它不维护状态映射。所有交互都要基于 DOM 实例做即时操作，而不是依赖数据响应。hover 显隐这种视觉反馈，本质是 DOM 层面的 show/hide 切换，绕开数据层反而更稳。
