首页 > 网页制作 >Layui 数据表格处理 JSON 嵌套数据格式

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

来源：互联网 2026-07-15 19:36:09

Layui表格无法直接处理嵌套JSON数据，field不支持点号路径，需通过parseData预处理将深层字段扁平化，或使用templet函数展示单列嵌套值。排序和导出功能仅依赖扁平字段，必须手动处理，避免列空白或显示[objectObject]。

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 不做运行时防护，出错时往往只是列空白，控制台还未必报错。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述