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）映射成一个新数组，每一项都是带完整字段的普通对象。
- 字段名要和列定义
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
