Layui table.render 不支持 field 直接解析嵌套数组路径（如 'list.0.name'），需通过 parseData 预处理扁平化数据或用 templet 手动遍历渲染；后端返回扁平结构更稳定高效。
layui table.render 渲染 nested array 时字段取不到值？
直接写 field: 'list.0.name' 是无效的——layui 的 cols 配置不支持点号路径解析嵌套数组，它只认一级对象属性。你看到表格空白或显示 undefined，大概率是误用了 js 路径语法。
真正能用的只有两种方式：预处理数据、或用 templet 手动提取。别指望靠 field 自动钻进数组里。
- 如果嵌套结构固定且层级浅（比如
data.items[0].title），优先在parseData回调里提前扁平化 - 如果要展示数组全部元素（如标签列表、多图缩略图），必须用
templet+ 循环拼接 HTML - 别在
templet里写复杂逻辑；Layui 模板不支持 for/of，老老实实用forEach或传统for循环
用 parseData 预处理嵌套数组成单层字段
这是最干净的做法：在请求返回后、渲染前，把深层字段“提上来”。比如原始数据是 {user: {profile: {name: '张三', tags: ['前端', 'Vue']}}}，你想在列里直接显示 name 和第一个 tag：
table.render({
elem: '#demo',
url: '/api/list',
parseData: function(res) {
return {
code: res.code,
msg: res.msg,
count: res.count,
data: res.data.map(function(item) {
// 提前解构嵌套字段
return {
id: item.id,
name: item.user.profile.name,
firstTag: item.user.profile.tags[0] || '-',
tagList: item.user.profile.tags // 保留原数组供 templet 用
};
})
};
},
cols: [[
{field: 'name', title: '姓名'},
{field: 'firstTag', title: '首标签'},
]]
});
注意：parseData 必须返回含 data 字段的对象，否则表格不渲染；map 不会修改原始响应，安全。
用 templet 显示整个嵌套数组（如多图、多标签）
当一列要呈现数组所有项（不是只取一个），templet 是唯一选择。Layui 不提供内置数组遍历语法，得手写 JS 字符串拼接：
{field: 'tagList', title: '标签', templet: function(d) {
if (!Array.isArray(d.tagList) || d.tagList.length === 0) return '-';
return d.tagList.map(function(tag) {
return '<span class="layui-badge">' + tag + '</span>';
}).join(' ');
}}
常见坑：
- 没判空就直接
d.tagList.map→ 控制台报Cannot read property 'map' of undefined - 在
templet里用了async/await或 Promise → Layui 模板函数必须同步返回字符串 - 拼 HTML 时忘了转义用户输入 → 有 XSS 风险，用
laytpl或手动escape处理
后端直接返回扁平结构比前端硬解更稳
如果嵌套来自数据库 JOIN 或多个服务聚合，与其在前端反复 map + forEach，不如让后端吐出已组装好的字段。比如：
不要返回：{"user": {"id": 1, "name": "李四"}, "orders": [{"sn": "ORD001"}, {"sn": "ORD002"}]}
而应返回：{"user_id": 1, "user_name": "李四", "order_sn_list": ["ORD001", "ORD002"]}
这样前端连 parseData 都省了，field 直接绑定，也避免因前端 JS 执行环境差异（比如 IE 下 forEach 兼容性）导致渲染失败。
嵌套越深、数组越长，前端解析成本越高；表格滚动时频繁重绘，templet 函数执行次数翻倍，卡顿就从这儿来。
