导出列顺序由 cols 配置决定,不是 DOM 渲染顺序;Layui 的 exportFile 仅依据 table.render 时传入的 cols 数组顺序导出,不识别拖拽、hide: true 或临时 cols 参数,动态调整需修改 config.cols[0]。
导出列顺序由 cols 配置决定,不是 DOM 渲染顺序
很多人以为表格里拖拽调整了列顺序,导出就会跟着变——不会。layui 的 exportfile 方法(包括 table.exportfile)完全不读取页面上的 <th> 或 <td> 排列,它只认你初始化表格时传入的 cols 数组结构。
关键点:同一级 cols 数组中对象的顺序,就是导出 Excel 表头和数据列的顺序。
- 如果你用的是多级表头(如
children),导出只支持一级cols[0]下的字段,嵌套的children不会自动展平或参与排序 -
exportFile不会识别hide: true的列,但也不会跳过你写在cols里、实际没渲染的列——只要它在数组里,就导出 - 列宽、样式、合并单元格等格式导出时不生效,顺序是唯一能靠配置控制的维度
exportFile 不接受自定义列数组,得改 table.config
你不能像调用 table.exportFile('id', { cols: [...] }) 这样临时传新列顺序——这个 API 没有 cols 参数。它只接受 id、data、type 和 filename。
所以想手动控制顺序,只有两个办法:
- 在调用
table.render()时,把cols按你想要的导出顺序写好,后续所有导出都按这个走 - 导出前动态重写表格实例的
config.cols,再调exportFile—— 注意必须改config.cols[0](默认第一级),且要确保改完后没有其他逻辑依赖旧顺序 - 如果用了
table.on('init')或异步加载列配置,务必等config真正挂载完成后再改,否则改了也白改
隐藏列但保留导出顺序:用 hide: false + unresize: true 配合
有时候你需要某列在界面上不可见(比如 ID 字段),但又必须出现在导出文件最前面。这时候别用 hide: true,因为它会让这列彻底不出现在导出里。
正确做法是让列“视觉隐藏但逻辑存在”:
- 设置
hide: false(显式关闭隐藏) - 加
unresize: true和width: 1,再配合 CSS.layui-table-cell{ overflow: hidden; }视觉上收掉 - 把它放在
cols[0]数组最前面,就能保证导出时排第一 - 注意:如果用户点了“显示列”菜单,这列会重新出现,所以更适合后台管理类场景,且需同步控制权限
导出 CSV 时中文乱码?顺序没错但内容错位
这不是顺序问题,是编码陷阱。Layui 导出 CSV 默认用 UTF-8,但 Windows Excel 打开时会当成 ANSI,导致首列看起来像乱码、后续列整体右移一格。
解决方式不是调顺序,而是加 BOM 头:
- 拦截
exportFile返回的 Blob,用new Blob(['\ufeff' + csvContent], ...)包一层 - 或者改用服务端导出,由后端写 BOM 并设
Content-Type: text/csv;charset=utf-8 - 如果坚持前端导出,注意
exportFile的type参数填'csv'时,内部生成逻辑不加 BOM;填'xls'反而自带兼容处理
顺序对了,但打开一看字段全偏了——八成是这个原因,不是 cols 写错了。
真正麻烦的不是怎么排顺序,而是得记住:Layui 的导出本质是把 config.cols 映射成二维数组再喂给 SheetJS(旧版)或自研生成器,中间没留钩子。想灵活控制,要么提前规划好 cols,要么自己造个 exportData 方法绕过它。


















