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

Layui表格不支持field直接写'user.info.name'，因其仅识别一级键名，深层字段必须通过parseData扁平化或templet手动取值，否则列为空、显示[object Object]或排序失效。

直接写 field: 'user.info.name' 是无效的，layui 表格只认一级键名，深层字段必须手动解构或用 templet 渲染，否则列为空、显示 [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 快速展示单列嵌套值（适合轻量展示）

适合只有一两列要取深层字段、且不需要排序/筛选的场景，比 parseData 更轻量。

• templet 函数写法更可控：templet: function(d) { return d.user?.info?.name || '-'; }
• 模板字符串写法不支持可选链：templet: '<div>{{d.user.info.name}}</div>'，遇到空值会崩，必须用函数兜底
• 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 不做运行时防护，出错时往往只是列空白，控制台还未必报错。