Layui表格中二维码需用cell事件+layer.open动态弹层实现，因CSS hover无法渲染图片且伪元素易错位；须防抖、每次新建容器、encodeURIComponent中文、手动清空canvas。
直接在单元格里渲染二维码并悬浮展示，不是靠 CSS hover 实现的——Layui 表格单元格默认不支持原生 hover 弹出二维码，必须用 JS 控制显隐，且容器需提前挂载、内容需延迟生成。
为什么不能用纯 CSS hover + title 或伪元素？
title 只能显示文本，无法渲染二维码；而用 ::before/::after 插入 base64 图片，在 Layui 表格中会因 DOM 渲染时机错乱导致定位偏移、重复插入或根本不出现在目标单元格内。更关键的是：表格重载（table.reload()）、分页切换、列宽调整都会让伪元素脱离上下文，失去绑定关系。
正确做法：用 cell 事件 + layer.open 动态弹层
监听单元格点击或鼠标移入，触发轻量弹窗，把二维码画在 layer 内部。这是唯一稳定、可维护、兼容分页和重载的方案。
- 用
table.on('cell(filter)', callback)捕获具体哪一列被 hover/click，避免全局监听污染 - 在回调里调用
layer.open({ type: 1, content: ... })，content 用document.createElement('div')构建临时容器，再用QRCode.render()或layui.qrcode绘制 - 别复用同一个
div元素——每次都要新建，否则旧二维码 canvas 会残留，layer 关闭后内存不释放 - 移动端需加
style="image-rendering: -webkit-optimize-contrast;"到二维码<img>上，否则扫码模糊
templet 里写个空容器，但别在里面生成二维码
在列配置的 templet 中只放一个带唯一标识的空 <div class="qr-hover-trigger" data-id="{{d.id}}"></div>。不要写 new QRCode(...)，也不要用 qrcode.js 的 render() 直接怼进去——此时 <div> 还没挂到 DOM 树上，appendChild 必报 Cannot read property 'appendChild' of null。
- 所有二维码绘制逻辑必须收口到
cell或done回调里 - 如果选 hover 触发，记得加防抖（
setTimeout+clearTimeout），否则快速划过会频繁 open/close layer - layer 弹层关闭时，手动清空内部 canvas（
el.innerHTML = ''），避免下次打开残留旧图
最易忽略的一点：二维码内容若含中文或特殊字符，必须先 encodeURIComponent()，否则生成的码扫出来是乱码或空白——这个步骤不在 qrcode 库自动处理范围内，得你来兜底。
