Layui表格中头像列表须用函数型templet遍历avatars数组，兜底空值并限制显示前3个；每个img需加onerror降级默认图，URL须后端预拼完整且启用HTTP缓存。
layui table 中如何用 templet 渲染头像列表
直接在 cols 里配 templet，别试图用 format 或后端拼 html 字符串。layui 的表格列模板只认函数返回值或字符串模板，且必须返回合法 html 片段。
常见错误是把头像数组丢进一个字段（比如 avatars），然后在模板里写死 data.avatars[0] —— 这只能显示第一个，而且没容错。
- 正确做法：用函数型
templet遍历data.avatars，每个头像加layui-avatar类（可选）和title提示用户名 - 头像数量多时建议限制显示前 3 个，避免行高失控；可用
Math.min(data.avatars.length, 3) - 务必检查
data.avatars是否为数组，空值、null、undefined或字符串都要兜底，否则控制台报Cannot read property 'length' of undefined
{
field: 'avatars',
title: '在线头像',
templet: function(d) {
if (!Array.isArray(d.avatars) || d.avatars.length === 0) return '<span class="layui-badge-rim">无</span>';
return d.avatars.slice(0, 3).map(avatar =>
'@@##@@'
).join('');
}
}
后端返回的头像数据结构怎么设计才不翻车
Layui 表格不接受嵌套对象自动展开，avatars 字段必须是数组，不能是对象（如 {list: [...]}）或字符串（如 "[...]"）。
典型翻车点：Java 后端用 @ResponseBody 返回 Map，把头像列表塞进 result.put("avatars", userList)，但忘了 userList 里的每个用户对象是否含 url 和 name 字段。
- 前端能直接用的最小结构是：
[{"url": "https://...", "name": "张三"}, ...] - 如果后端只能返回 ID 列表（如
[101, 102]），就得前端再发请求查头像 —— 不推荐，会触发 N+1 请求，卡表格渲染 - 若头像 URL 有权限控制（如需 token），后端应在返回时就拼好带签名的完整 URL，前端别自己拼
?t=xxx
头像加载失败时如何静默降级
网络抖动或 CDN 404 会让 <img src="'%20+%20(avatar.url%20%7C%7C%20'/default-avatar.png')%20+%20%0A%20%20%20%20%20%20'" alt="' + (avatar.name || '用户') +
'" title="' + (avatar.name || '用户') +
'" style="width:24px;height:24px;border-radius:50%;margin-right:4px;"> 显示裂图，影响表格整洁度。Layui 没提供图片加载失败钩子，得手动绑定 onerror。
- 在
templet生成的<img>标签里加onerror="this.src=\'/default-avatar.png\'" - 不要用
onerror="this.style.display=\'none\'"，隐藏后留白难看，统一换默认图更可控 - 如果默认图也要走 CDN，确保该地址绝对稳定；本地路径用相对路径（如
/static/img/default.png），避免协议错误
性能问题：100 行表格每行显示 5 个头像，页面会卡吗
会，但不是因为头像本身，而是 DOM 节点爆炸。100 × 5 = 500 个 <img> 标签 + 全部触发 onload/onerror 绑定，滚动时重绘压力大。
- 真实项目中，用
lay-page分页控制单页 ≤ 30 行；配合page: {limit: 30} - 头像列表超过 3 个时，用「+2」气泡代替剩余项，例如：前 3 个头像 +
<span class="layui-badge">+2</span> - 别给每个头像加
title（尤其是中文），tooltip 初始化有开销；真需要详情，改用点击弹层查全量
最易被忽略的是：头像 URL 没开 HTTP 缓存（Cache-Control: public, max-age=3600），导致每次刷新都重新下载 —— 这比渲染慢更伤体验。
