Layui表格数据返回格式parseData如何处理多级嵌套的List-Layui教程-PHP中文网

layui表格不支持嵌套路径解析，必须手动扁平化数据；parsedata需返回纯对象数组，字段名须与列定义field严格对齐，否则渲染为空或报错。

必须手动解构嵌套结构，parsedata 返回的 data 数组里每项都得是扁平对象，layui 表格不认 res.data.list[0].userinfo.name 这种路径写法。

为什么 `parseData` 里取不到 `data.list[0].userInfo.name`

Layui 表格内部只遍历你塞进 data 数组里的每个元素，并假设它们是 plain object。它不会自动解析 res.data.list 或任何嵌套字段——哪怕你返回的是 { data: res.data.list }，只要没把 userInfo.name 提前解出来挂到顶层键上，列定义里的 field: 'userInfo.name' 就一定失效，渲染为空。

常见错误现象：table.render() 后表格空白，控制台无报错，但 network 响应里明明有数据
根本原因：后端返回类似 { code: 0, data: { total: 100, list: [{ id: 1, user: { info: { name: '张三' } } }] } }，而你直接 return { count: res.data.total, data: res.data }
正确做法：用 map 显式提取并扁平化，比如 res.data.list.map(item => ({ id: item.id, name: item.user?.info?.name || '-' }))

`parseData` 中处理多层嵌套 List 的实操写法

核心就一条：把原始嵌套数组（如 res.data.result.items）映射成一个新数组，每一项都是带完整字段的普通对象。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

字段名要和列定义 field 严格对齐，比如列写了 { field: 'realName', title: '姓名' }，那 map 里就必须有 realName: item.person?.profile?.realName || ''
务必对 null/undefined 做防御，推荐用可选链 + 空值合并：item?.order?.customer?.contact?.phone ?? ''
count 必须是数字类型，不能是字符串或 undefined，否则分页控件不显示；建议显式转成 Number(res.data.pagination?.total)
避免在 map 里做异步、DOM 操作或复杂计算，纯同步数据转换

parseData: function(res) {
  return {
    code: res.code,
    msg: res.msg,
    count: Number(res.data.pagination?.total) || 0,
    data: (res.data.result?.items || []).map(function(item) {
      return {
        id: item.id,
        realName: item.person?.profile?.realName || '-',
        phone: item.person?.contact?.phone || '',
        status: item.status
      };
    })
  };
}

什么时候该用 `templet` 而不是 `parseData`

如果你只有一两列需要展示嵌套字段，其他列都是平铺结构，且不需要排序/筛选/导出这些依赖字段值的功能，templet 更轻量。

templet 里可以安全用 d?.user?.info?.name，因为它是渲染时动态取值，不改变数据结构
但 field 仍需填一个存在的顶层键名（比如 field: 'user'），哪怕这个键在数据里没用——否则排序会失败
如果某列既要显示嵌套值，又要支持点击排序，就必须走 parseData 预先把值提上来，否则排序逻辑找不到对应字段
templet 不适合大量使用：每行每个单元格都执行一次函数，万级数据下卡顿明显

容易被忽略的兼容性与性能点

很多人调通了就以为完事，但上线后才发现异常——问题往往出在边界和规模上。

Array.isArray(res.data.list) 必须为真，传入 Map/Set/类数组对象会导致 forEach 失效，列全空
确保每项 typeof d === 'object' && d !== null && !Array.isArray(d)，否则 layui 内部属性赋值会出错
嵌套超过 3 层、单页数据超 2000 条时，map 解构耗时明显，建议后端直接返回扁平结构
IE11 不支持可选链（?.），如需兼容，改用 item && item.user && item.user.info && item.user.info.name 或 polyfill