Layui表格中不能直接在templet里写二维码JS实例，必须等DOM挂载后用done回调或cell事件初始化layui.qrcode；templet仅返回含data-*的容器，由后续JS动态渲染。
表格列中直接用 templet 渲染二维码图片
layui 的 table.render() 不支持在单元格里直接写 html 标签（比如 <img>），但可以通过列配置的 templet 选项返回字符串形式的 html。关键不是“插入图片”，而是“动态生成带二维码的 <img> 标签”。
常见错误是直接在数据里塞一个 URL 字符串，然后用 {field: 'qrcode_url'} 显示——这只能显示文字或空，因为 Layui 默认对内容做 HTML 转义。
- 必须用
templet函数，返回未转义的 HTML 字符串 - 二维码图片建议用前端库（如
qrcode.js）提前生成 base64，或后端直接返回可访问的 URL - 如果用 base64，注意长度限制和渲染性能；URL 更轻量，但要确保跨域或路径正确
templet: function(d) {
return '<img src="' + (d.qrcode_url || '/default-qrcode.png') + '" width="40" height="40" alt="QR">';
}
用 qrcode.js 在 templet 中实时生成 base64 二维码
如果你的数据字段是文本（比如订单号 d.order_no），需要现场生成二维码，qrcode.js 是最轻量的选择。注意：不能在 templet 里异步请求、也不能反复 new 实例——得复用或缓存 canvas。
- 引入
qrcode.js（v1.5.3+ 支持直接生成 base64） -
templet函数内调用QRCode.toDataURL()，但需捕获异常（空值、非法字符会报错） - 不要每次渲染都 new QRCode 实例，应封装成工具函数并缓存结果，否则滚动时卡顿明显
templet: function(d) {
try {
const url = d.order_no ? QRCode.toDataURL(d.order_no, {width: 40}) : '';
return url ? '<img src="' + url + '" width="40" height="40">' : '—';
} catch(e) {
return '×';
}
}
表格重载后二维码不更新？检查 reload 是否清空了缓存
当调用 table.reload() 刷新表格时，如果二维码基于原始数据动态生成，但你又在 templet 外部做了 base64 缓存（比如用对象存 cache[order_no] = dataUrl），就容易出现“旧码没刷新”的问题。
- 缓存 key 必须包含足够区分度（比如加时间戳或版本号），或干脆不用缓存，依赖
templet每次重算 - 如果用了
done回调里批量生成二维码，记得在reload前手动清掉缓存对象 - 更稳妥的做法：把二维码生成逻辑收敛到一个纯函数，输入确定则输出确定，不依赖外部状态
移动端扫码模糊？控制图片尺寸与设备像素比
直接设 width="40" 在 Retina 屏上会模糊，因为实际渲染只有 20px 物理像素。Layui 表格本身没做 DPR 适配，得手动处理。
- 用
style="width: 40px; height: 40px; image-rendering: -webkit-optimize-contrast;"强制清晰渲染 - 或根据
window.devicePixelRatio动态生成更大尺寸的 base64（比如 DPR=2 时生成 80×80 的码再缩放） - 避免用 CSS 缩放
<img>，会导致二维码模块失真，扫码失败率上升
真正难的不是生成图，而是让每张图在各种屏幕下都扫得准——这点很容易被忽略，直到上线后用户反馈扫不出。
