parseData 必须返回含 code、count、data 的对象:code 为数字 0 表示成功,count 为总条数(非当前页长度),data 为数组且需扁平化嵌套字段;类型错误、异步操作或缺失字段将导致表格空白或分页失效。
parseData 必须返回含 code、count、data 的对象
layui 表格在远程请求后,只认这三项:数字型 code(0 表示成功)、字符串型 msg(可选)、数字型 count(总条数)、数组型 data(当前页数据)。缺任何一项,表格就空白或分页失效。
常见错误是只处理 data,漏掉 count 或把 code 写成字符串 "0"——Layui 会当失败处理,不渲染任何行。
-
count不能靠res.data.length推算,那是当前页数量;必须取后端明确返回的总数字段,比如res.total、res.pagination?.total、res.meta?.count - 如果后端真没给总数,
count设为一个大数(如99999),并配page: false禁用分页 -
data必须是Array.isArray(),空数组[]可以,null或undefined会导致Cannot read property 'length' of undefined
嵌套结构必须用 map 扁平化,不能直接写 field: "user.info.name"
Layui 表格的 field 不支持点号路径,field: "user.info.name" 会显示空白或 [object Object]。想让「用户姓名」可排序、可筛选、可导出,就得在 parseData 里把嵌套字段提前解出来。
别改原始数据,用 map 创建新对象:
parseData: function(res) {
return {
code: res.code === 0 ? 0 : 1,
count: res.total,
data: (res.list || []).map(function(item) {
return {
id: item.id,
name: item.user?.info?.name || '-',
dept: item.user?.info?.dept || ''
};
})
};
}
- 每项必须是 plain object,不能带
Map、Set或原型方法 - 用可选链
?.防Cannot read property 'info' of undefined - 别写
item.user.info.name直接赋值——这会污染原始响应,影响缓存或后续逻辑
templet 适合单列轻量展示,但 field 仍需对应扁平 key
如果只有「姓名」这一列要取嵌套值,且不需要排序/筛选/导出,用 templet 更省事。但它不改变表格底层数据结构,field 还得填一个真实存在的顶层键名(比如 name)。
两种写法都行,但注意区别:
- 模板字符串:
templet: '<div>{{d.user.info.name}}</div>'—— 不支持?.,空值会报错或空白 - 函数写法:
templet: function(d) { return d.user?.info?.name || '-'; }—— 安全,推荐 -
field: "name"必须存在,否则点击表头排序会失效
最容易被忽略的坑:类型错、异步、副作用
parseData 是纯同步函数,任何异步操作或 DOM 修改都会导致不可预测行为。它执行时机在响应到达后、Layui 解析前,非常早。
-
count必须是数字,"128"要转成+res.total或Number(res.total),否则分页计算全乱 - 别在里面调
layer.msg()、发$.ajax、改document.body——这些都不是它的职责 - 如果用了
response配置(如response: { countName: 'data.total' }),parseData在它之后执行,顺序不能颠倒 - 后端返回空列表时,
res.list可能是null,要用res.list || []或可选链兜底
真正麻烦的不是怎么写,而是后端字段名五花八门又不统一——防御式写法(?. 、??、fallback)比硬编码更可靠。


















