Layui 数据表格 处理 JSON 嵌套数据格式

Layui表格处理嵌套JSON数据，确实是个容易踩坑的地方。直接写 field: 'user.info.name' 行不行？答案是不行，因为Layui表格只认一级键名，深层字段必须手动处理，否则列是空的，或者显示 [object Object]，甚至排序功能直接失效。

为什么 field: 'user.info.name' 渲染不出数据

Layui内部是怎么取值的？它用的是 item[field]。这里的 field 就是一个字符串字面量，不会做任何路径解析。你写 'user.info.name'，它就老老实实去读 item['user.info.name']，结果自然是 undefined。

• 常见错误现象：列空白、显示 [object Object]、控制台没报错但数据就是没出来
• templet 函数里能访问整行原始数据（参数 d），但它只管渲染，不影响排序和筛选逻辑
• 排序依赖 field 对应的值存在且为基本类型（string/number），不能靠 templet 补救

用 parseData 预处理嵌套结构（适合需排序/筛选/导出）

在 table.render() 配置中加 parseData，把深层字段提前解出来，生成纯平对象数组。这是最彻底的办法。

• 返回的 data 必须是 Array.isArray()，且每项是 plain object（不能带 Map/Set/原型方法）
• 别直接修改原始 res，比如 res.data.list[i].user = {}，会污染缓存或影响其他模块
• 用可选链避免报错：item.user.info.name || '-'
• 示例：

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 快速展示单列嵌套值（适合轻量展示）

如果只有一两列要取深层字段，且不需要排序/筛选，用 templet 比 parseData 更轻量。

• templet 函数写法更可控：templet: function(d) { return d.user.info.name || '-'; }
• 模板字符串写法不支持可选链：templet: '
  {{d.user.info.name}}
  '，遇到空值会崩，必须用函数兜底
• field 仍需填一个真实存在的 key（如 field: 'name'），哪怕只是占位——否则排序开关无效
• 别在 templet 里做异步请求、复杂计算或 DOM 操作，会阻塞整个表格渲染

导出 Excel 时嵌套字段显示 [object Object]

table.exportFile() 不走 templet，也不解析点号路径，它直接读原始 data 数组里的字段值，遇到对象就调 toString()，结果就是 [object Object]。

• 必须导出前手动扁平化：const exportData = tableData.map(item => ({ userName: item.user.name || '', deptName: item.user.dept.name || '' }))
• field: 'user.name' 对导出完全无效，别指望它自动生效
• 中文乱码？加 BOM 头或改用 xlsx 库（如 sheetjs）自己生成文件更稳妥
• 万级数据慎用 parseData + map 解构——性能损耗明显，真要撑住，得推动后端直接返回扁平结构

最容易被忽略的是：只要嵌套字段可能为 null 或 undefined，就必须用可选链或三元判断兜底；Layui 不做运行时防护，出错时往往只是列空白，控制台还未必报错。