Layui.table 默认不支持单元格内多图缩略图，因其列渲染仅作字符串拼接，templet 返回的 HTML 不自动处理图片数组、无尺寸限制与防溢出样式，易导致堆叠、撑宽、重排异常。
为什么 layui.table 默认不支持单元格内多图缩略图？
因为 layui 的表格列渲染走的是字符串拼接逻辑，templet 函数返回的内容会被当作纯 html 插入，但默认没有对图片数组做遍历处理，更不会自动加样式限制尺寸或防溢出。你直接 return 一个包含多个 <img> 的字符串，很可能图片堆叠、撑破列宽、点击无响应，甚至在 ie 或旧版 chrome 下触发重排异常。
用 templet 手动拼接带样式的多图结构
核心是把后端传来的图片 URL 数组（比如 ["/upload/a.jpg", "/upload/b.jpg"]）转成带 display: inline-block 和固定尺寸的 <img> 列表，并包裹在容器里控制换行和溢出。
示例写法：
templet: function(d) {
if (!Array.isArray(d.images) || d.images.length === 0) return '—';
return '<div class="layui-table-img-list">' +
d.images.map(url =>
'<img src="' + url + '" alt="" style="width: 40px; height: 40px; object-fit: cover; margin-right: 4px; border-radius: 2px;">'
).join('') +
'</div>';
}注意几个关键点：
-
layui-table-img-list这个 class 要自己加 CSS 控制最大高度和 overflow，比如：.layui-table-img-list { max-height: 44px; overflow: hidden; } - 务必用
object-fit: cover防止图片拉伸变形 - 避免用
width: 100%或未设高宽的<img>，否则在表格列宽变化时容易抖动 - 如果图片数量可能很多（>5 张），建议加“+N”提示，而不是全量渲染——不然会卡顿
点击缩略图预览全部图片要怎么接？
Layui 自带的 layer.photos 支持传入 DOM 节点或 JSON 数组，但不能直接作用于表格里的动态生成内容。必须给每个单元格内的图片绑定事件，且确保 layer 能拿到完整图片列表。
推荐做法：
- 给外层容器加唯一 data 属性，比如
data-photos='["/a.jpg","/b.jpg"]' - 用事件委托监听表格 body 上的
click，过滤到.layui-table-img-list img - 点击时解析
closest("[data-photos]").dataset.photos，JSON.parse后传给layer.photos - 不要在
templet里为每张图都写onclick，太冗余且易内存泄漏
移动端适配和性能容易被忽略的点
表格在手机上横向滚动时，多图缩略图常出现错位或模糊，根本原因是图片未设置 max-width: 100% 且没做 DPR 适配。
建议补充的 CSS：
.layui-table-img-list img {
width: 36px;
height: 36px;
/* 高清屏适配 */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
@media (max-width: 768px) {
.layui-table-img-list img {
width: 32px;
height: 32px;
}
}另外，如果图片来自用户上传，务必确认后端已生成合适尺寸的缩略图（比如 80×80），别直接塞原图——否则首屏加载慢、内存飙升，templet 渲染完表格还会卡顿几秒。
