Layui数据表格如何处理返回结果中的data嵌套数组-Layui教程-PHP中文网

Layui表格必须通过parseData手动解构嵌套路径（如res.data.list）并返回含data数组和count数字的扁平对象，或用templet配合可选链安全取值，field仍需匹配顶层键名以支持排序。

parseData 必须手动解构 data 嵌套路径

layui 表格默认只认 res.data，如果后端返回的是 res.data.list 或 res.result.items 这类嵌套结构，直接配置 url 会渲染空表——因为 dataname: 'data' 拿不到真实数组。

必须用 parseData 提取并返回扁平的 data 数组：

parseData 接收原始响应对象 res，你要自己写路径取值，比如 res.data?.list || [] 或 res.result?.items || []

返回对象必须包含 data（数组）和 count（数字），例如：

parseData: function(res) {<br>  return {<br>    code: res.code,<br>    msg: res.msg,<br>    count: Number(res.data?.total) || 0,<br>    data: res.data?.list || []<br>  };<br>}

count 一定要是数字类型，Number() 包一层防字符串；data 必须是 Array.isArray()，空数组也得显式写 []，不能留 undefined

templet 渲染单列嵌套字段时怎么安全取值

如果你只是某列要显示 user.info.name 这种深层字段，且不需要排序/筛选/导出，templet 比 parseData 更轻量，但写法有坑。

错误写法：templet: '<div>{{d.user.info.name}}</div>' —— 模板语法不支持可选链，d.user 为 null 就崩；templet: function(d) { return d.user.info.name; } 同样会报 Cannot read property 'info' of undefined。

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

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

下载

推荐写法：templet: function(d) { return d.user?.info?.name || '-'; }（Layui 2.8+ 支持）
兼容老版本（如 IE）：templet: function(d) { return (d.user && d.user.info && d.user.info.name) || '-'; }
field 仍需填一个真实存在的顶层 key（如 field: 'name'），否则点击列头排序会失效——templet 只管渲染，不管数据映射

后端返回数组嵌套（如 tags: [{name: 'Vue'}, {name: 'Layui'}]）怎么取第一个

想在表格里只显示 tags[0].name，直接写 d.tags[0].name 极大概率报错：因为 d.tags 可能是 null、undefined 或空数组 []。

安全写法：templet: function(d) { return (d.tags || [])[0]?.name || '-'; }
更稳妥（兼容低版本）：templet: function(d) { var tag = (d.tags || [])[0]; return tag && tag.name ? tag.name : '-'; }
如果要拼多个标签，提前在 parseData 里处理好：tagsText: (d.tags || []).map(t => t.name).join(' / ') || '-' ，然后 field: 'tagsText'

别在 parseData 里污染原始 res 对象

常见错误是直接改 res.data.list[i].user.info = {...}，以为能“顺手扁平化”，结果导致缓存错乱、分页重载时数据异常、甚至影响其他模块读取同一份响应。

parseData 应该只做映射，不改源数据。用 map 创建新对象：

data: res.data.list.map(item => ({<br>  id: item.id,<br>  name: item.user?.info?.name,<br>  statusText: item.status === 1 ? '启用' : '停用'<br>}))

确保返回的每项都是 plain object：typeof item === 'object' && item !== null && !Array.isArray(item)，别传 Map、Set 或带自定义原型的对象进去
大数据量（>5000 行）时，parseData 里的 map 会明显卡顿，优先让后端返回扁平结构