Layui table 提示返回的数据不符合规范时如何配置 response 状态码或使用 parseData 解析【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui使用 layui 3 的 table 通过url拉取数据时如果后端返回体的状态字段与 table 的预期不一致表格区域会显示返回的数据不符合规范正确的成功状态码应为code: 0这类提示数据不会渲染。本文基于本仓库源码说明这条提示的触发条件并给出两条修改路径配置response对齐后端返回字段与状态码或用parseData把任意返回格式映射成 table 期望的格式最后说明如何验证修改生效。这条提示是从哪来的提示文案定义在 src/core/i18n.js 的table.dataFormatErrordataFormatError: 返回的数据不符合规范正确的成功状态码应为{statusName}: {statusCode}其中{statusName}和{statusCode}会被替换为当前实例实际配置的状态字段名与成功状态码。也就是说提示里写的是code和0说明你用的就是默认配置如果改过response提示里会显示你改后的值这本身就是一个核对点。触发逻辑在 src/components/table.js 的 Ajaxsuccess回调中先执行数据解析回调如果配置了parseData见 src/components/table.jsif (typeof options.parseData function) { res options.parseData(res) || res; }即校验的对象是parseData的返回值若它返回undefined/null等假值则保留原始响应。随后做状态码校验if (res[response.statusName] ! response.statusCode) { that.errorView( res[response.msgName] || i18n.$t(table.dataFormatError, { ... }) ); }当res[状态字段名]不等于成功状态码时先展示res[response.msgName]的值msg字段没有值时才显示上面的默认规范提示。需要与另一种提示区分请求在网络/HTTP 层失败时显示的是请求异常错误提示{msg}table.xhrError见 src/components/table.js它走的是error回调与response配置无关。看到返回的数据不符合规范时说明请求已成功返回只是返回体结构不合预期应按本文两条路径处理。默认的 response 字段约定table 实例构造时会将response与默认值合并见 src/components/table.js字段默认值源码注释statusNamecode规定数据状态的字段名称statusCode0规定成功的状态码msgNamemsg规定状态信息的字段名称dataNamedata—totalRowNametotalRow规定数据统计的字段名称countNamecount—也就是说默认情况下 table 期望接口返回类似{ code: 0, msg: ..., count: 10, data: [...] }的结构且code必须是0数字或字符串0均可源码使用!做松散比较。后端只要偏离其中任一项就会触发本文开头的提示。方案一配置 response 对齐后端返回如果你的后端只是成功状态码不同、或字段命名与默认不同例如用status承载状态码在table.render的配置中通过response逐项覆盖即可不必改后端也不必写parseData。下面的代码块中statusName/statusCode必须替换成你的后端实际使用的字段名与成功状态码二者是唯一需要你自己提供的值layui.table.render({ elem: #test, // 你的表格容器选择器 url: /你的/数据/接口, // 你的数据接口地址 response: { statusName: status, // 替换为后端返回中承载状态码的字段名 statusCode: 10000, // 替换为后端表示成功时返回的状态码 } });几点说明若后端成功码就是0只需覆盖statusName等其他不匹配的字段statusCode可省略保持默认值0。若后端的状态提示字段不叫msg例如message应同时覆盖msgName否则状态码不匹配时表格无法展示后端给出的提示信息只会显示默认的规范提示。若数据数组或总数字段命名不同例如后端把列表放在rows里、总数放在total里同样用dataName、countName覆盖。当字段映射关系较复杂、用response逐字段覆盖仍对不齐时再考虑方案二。方案二用 parseData 映射任意返回格式parseData在状态码校验之前执行可以接收后端的原始返回并返回一个 table 期望的对象。本仓库演示页面 tests/visual/table-test.html 中给出了一个示例原文为注释parseData: function(res){ // 任意数据格式的解析 return { status: res.status, msg: res.message, count: res.total, data: res.data.list }; },它把{ status, message, total, data: { list } }这种格式映射成对象后交给后续校验。注意两点映射返回对象的键名必须与response配置对齐校验读取的是res[response.statusName]而默认statusName是code上例返回的键是status因此使用时需同时配置response: { statusName: status }两者必须一致否则依然会报不符合规范。parseData返回假值undefined、null等时table 会回退使用原始响应映射不会生效见 src/components/table.js。如果你的后端就是返回{ status, message, total, data: { list } }方案二与response配置组合后的完整示例如下仅statusName与statusCode需按你的后端实际值替换statusCode替换为后端表示成功时返回的状态码layui.table.render({ elem: #test, url: /你的/数据/接口, response: { statusName: status, // 与 parseData 返回对象的键名保持一致 statusCode: 10000, // 替换为后端表示成功时返回的状态码 }, parseData: function(res){ return { status: res.status, msg: res.message, count: res.total, data: res.data.list, }; }, });验证修改是否生效重新加载页面或触发 table 的数据请求后表格区域不再显示返回的数据不符合规范提示且按data或你配置的dataName字段渲染出数据行即修改成功。可以用done回调检查解析后的数据。table 在渲染完成后会调用options.done(res, current, res[response.countName], origin)见 src/components/table.jsdone: function(res, current, count, origin){ console.log(res, current, count); }若res中response对应的各字段都有值、count为预期总数说明返回体已通过校验并参与渲染。若修改后看到的是请求异常错误提示{msg}而不是不符合规范说明问题出在请求本身应改用error回调排查该回调接收(e, msg)见 tests/visual/table-test.html 中的用法而不是继续调整response或parseData。边界说明状态码比较使用!松散比较0与0、200与200均能匹配但状态字段名必须与statusName完全一致。状态码不匹配且res[response.msgName]有值时表格展示的是该msg值而非默认规范提示如果此时看到的提示是后端信息仍属于状态码/字段未对齐这一类问题。以上代码路径均对应本仓库 layui 3 的源码src/components/table.jsLayui 2 的文档不在本仓库内其字段约定请以 2.x 官方文档为准。【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考