layui table导出选中行为空的主因是未启用checkbox或事件绑定不当;getSelections()仅返回当前页勾选项,跨页需手动维护ID列表;exportFile()要求数据为二维数组且字段顺序严格对应cols,CSV导出须加UTF-8 BOM头并转义特殊字符。
layui table 导出选中行时 getSelections() 返回空数组
常见现象是点击导出按钮后 excel 里什么都没写,或者只导出全部数据——根本没走选中逻辑。原因几乎都是没开启多选支持,或没正确绑定事件。
-
table.render()初始化时必须显式设置checkbox: true,否则getSelections()永远返回空 - 导出触发点不能放在表格外部随意绑
click,得用table.on('toolbar(filter)', ...)或确保在done回调后执行,否则 DOM 还没渲染完,勾选状态未同步 - 注意:Layui 2.8+ 的
getSelections()只返回当前页已勾选的行;如果开了分页且用户跨页勾选,需要自己维护一个全局选中 ID 列表
用 layui.table.exportFile() 导出前必须构造合法的 data 格式
这个方法不接受原始 JSON 数组,它内部会校验字段名是否与 cols 中的 field 对齐。传错格式直接静默失败,控制台也不报错。
- 导出数据必须是二维数组,第一行为表头(
title字段值),后续每行为一行数据,顺序严格对应cols[0].field、cols[1].field… - 别直接把
getSelections()结果塞进去——它返回的是对象数组,得先map成按列顺序排列的数组,例如:[row.id, row.username, row.email] - 如果某列用了
templet渲染(比如状态显示“启用/禁用”),导出时得手动映射:原数据是status: 1,导出值应为"启用"
导出 Excel 时中文乱码或格式错乱
Layui 内置导出本质是生成 CSV,不是真正的 Excel(.xlsx)。所有“Excel”效果都靠系统用 Excel 打开 CSV 文件模拟,所以编码和换行很关键。
- 必须用 UTF-8 BOM 头,否则 Windows 上 Excel 默认用 GBK 解码,中文全变问号。生成 CSV 字符串前加
\ufeff - 字段内容含逗号、换行、双引号时,必须用双引号包裹,且内部双引号要转义为两个双引号(
"→""),否则 Excel 列错位 - 不要尝试用
exportFile()导出带样式的 Excel——它不支持合并单元格、颜色、数字格式。真有这些需求,得换xlsx库在前端生成 .xlsx
替代方案:用 xlsx 库导出更可控的 Excel
当业务要求导出格式稳定、支持多 sheet、保留数字类型(比如不把 00123 变成 123)或跨页全量导出时,exportFile() 就不够用了。
- 引入
https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js,比 Layui 自带方案体积略大但可控性强 - 用
getSelections()获取数据后,直接喂给XLSX.utils.json_to_sheet(),它自动处理字段顺序、空值、类型推断 - 注意:服务端无参与的纯前端导出,数据量别超过 5 万行,否则浏览器卡死。大数据量得走后端接口生成文件流











