Layui表格怎么实现复杂嵌套JSON的解析-Layui教程-PHP中文网

Layui table 的 parseData 必须手动扁平化多层嵌套字段，因 field 不支持点号路径；需用 map 遍历并解构提取深层值（如 item.user?.info?.name），返回纯对象数组，避免修改原 res、深拷贝或使用非法 key 访问。

layui table 的 `parseData` 怎么处理多层嵌套字段

直接用 field 指向 user.info.name 是无效的——layui 表格默认不支持点号路径解析。必须靠 parsedata 手动扁平化数据。

常见错误现象：table.render 渲染后列为空，控制台没报错，但 data 里明明有嵌套结构；或者只显示 [object Object]。

把原始响应数据里的 list 数组逐项遍历，用 JS 解构或临时变量提取深层字段
例如后端返回 {code:0, data:{list:[{user:{info:{name:'张三',age:28}}}]}}，就在 parseData 里重新组装成 {name: '张三', age: 28} 这样的扁平对象
注意：别在 parseData 里修改原始 res 对象（比如 res.data.list[i].user.info = ...），避免影响后续逻辑或缓存

parseData: function(res){
  return {
    "code": res.code,
    "msg": res.msg,
    "count": res.data.total,
    "data": res.data.list.map(function(item){
      return {
        id: item.id,
        name: item.user?.info?.name || '-',
        age: item.user?.info?.age || 0,
        status: item.status
      };
    })
  };
}

为什么不能用 `templet` 直接读 `user.info.name`

templet 函数里可以访问整行原始数据（d 参数），但它只负责渲染单个单元格，不改变表格内部的数据映射逻辑。列定义中 field 仍需对应最终扁平后的键名。

使用场景：当你只需要某列展示嵌套值、其他列仍是平铺结构时，templet 更轻量；但若多列都依赖同一嵌套路径，或需要排序/筛选，还是得走 parseData 预处理。

templet 中用可选链 d.user?.info?.name 安全取值，避免 Cannot read property 'info' of undefined
不要在 templet 里写复杂逻辑（如异步请求、大量计算），会阻塞渲染
如果该列要支持排序，field 必须存在且为字符串/数字，不能是函数或表达式

`parseData` 返回的 `data` 数组必须是纯对象数组

Layui 表格内部用 Array.prototype.forEach 遍历 data，并假设每个元素都是 plain object。如果误传了 Map、Set 或带原型方法的对象，会导致列渲染失败或排序异常。

性能影响：嵌套层级越深、数据量越大，parseData 里 map + 解构的开销越明显。万级数据建议后端直接返回扁平结构。

检查返回的 data 是否为 Array.isArray(res.data) 且每项 typeof d === 'object' && d !== null && !d.constructor.prototype
避免在 parseData 中调用 JSON.parse(JSON.stringify(...)) 深拷贝——既慢又可能丢失 Date、RegExp 等类型
兼容性注意：Layui 2.8+ 支持可选链，但若需兼容旧版 IE，得改用 item.user && item.user.info && item.user.info.name