layui table 的 cols 不支持自动解析嵌套字段（如 user.info.nickname），必须用 templet 手动取值并做空值防护，推荐 ES2020 可选链操作符（?.）或兼容写法，避免 parseData 全局扁平化。
layui table 的 cols 配置不支持自动展开嵌套对象
layui 的 table.render() 默认只读取一级属性，比如 data.name 可以直接写成 field: 'name'，但遇到 data.user.info.nickname 这种三级嵌套，直接写 field: 'user.info.nickname' 会显示 undefined——它不解析点号路径，也不递归取值。
常见错误现象：表格某列空白，控制台没报错，后端确认数据已返回完整嵌套结构，但前端就是拿不到深层字段。
- 必须用
templet手动提取，不能依赖field自动映射 - 如果嵌套层级深且字段多，别硬写
data.a && data.a.b && data.a.b.c，容易漏判空导致 JS 报错Cannot read property 'b' of undefined - 推荐统一用可选链操作符（
?.），但要注意 layui 2.8+ 才支持 ES2020 语法；老版本需回退到data && data.a && data.a.b写法
用 templet 提取嵌套字段的正确写法
这是最常用、也最可控的方式。在列配置中放弃 field，改用 templet 返回字符串内容。
使用场景：需要展示 user.profile.avatarUrl、order.items[0].name、meta.config.theme.color 这类非扁平字段。
示例（layui 2.8+）：
{
title: '头像昵称',
templet: function(d) {
return d.user?.profile?.nickname || '未设置';
}
}
性能影响很小，因为只是每次渲染时做一次属性访问；但注意别在 templet 里调接口或做复杂计算，否则滚动卡顿。
-
d是当前行原始数据对象，保持原样，不被 layui 做任何扁平化处理 - 避免在
templet中写JSON.stringify(d)调试——大量渲染时会明显变慢 - 如果要渲染带 HTML 的内容（如带颜色的状态标签），记得用
return '<span class="...">xxx</span>'，layui 会自动插入 DOM
后端返回数组嵌套时，templet 怎么安全取第一个元素
比如后端返回 tags: [{name: '前端'}, {name: 'Vue'}]，想只显示第一个 tag 名称，直接写 d.tags[0].name 很危险——d.tags 可能是 null、undefined 或空数组。
错误写法：d.tags[0].name → 控制台报错 Cannot read property 'name' of undefined，整列空白。
- 安全写法（ES2020）：
d.tags?.[0]?.name || '-' - 兼容旧版写法：
(d.tags && d.tags[0] && d.tags[0].name) || '-' - 如果要拼接多个 tag，用
(d.tags || []).map(t => t.name).join(' / ') || '-'
为什么不用 parseData 提前扁平化整个数据？
有人想在 parseData 回调里把所有嵌套字段提前展开成一级属性，比如把 user.info.nickname 搬到 nickname，再让 field: 'nickname' 直接用——这看似省事，实际埋坑不少。
兼容性风险：如果同一份数据还要用于其他模块（比如导出 Excel、详情页渲染），你改了原始结构，其他地方可能出错。
- 修改原始
d对象会影响后续所有引用，尤其用了table.cache或自定义事件时 - 字段名冲突概率高，比如两个不同嵌套路径都叫
id（user.id和order.id），强行扁平会覆盖 - 失去数据语义，调试时看不出字段来源，排查问题成本上升
真正该扁平化的，仅限极少数高频复用字段；其余一律交给 templet 按需取值，清晰又可控。
嵌套深不是问题，问题在于默认不帮你解构——只要每列明确知道自己要哪一层，就没什么难的。最容易被忽略的是空值判断，一漏就整列消失，还找不到原因。
