templet 渲染内容默认不参与导出,因 table.exportfile() 仅遍历原始数据 row[field] 取值,跳过 templet 函数;需通过 parsedata 预处理或 exporttemplet 单独定义导出格式。
templet 渲染的内容默认不参与导出,因为 table.exportfile() 只读取原始数据对象的字段值,不执行模板函数。
为什么 templet 内容导不出
table.exportFile() 底层直接遍历 row[field] 取值,完全跳过 templet 配置。哪怕你在列里写了 templet: d => '¥' + d.price.toFixed(2),导出时仍用原始 d.price(可能是数字、未格式化字符串或 undefined)。
常见错误现象:
- 金额列导出为
1234.5,而页面显示是¥1,234.50 - 状态列用
templet渲染成“✅ 已完成”,导出却是1或success - 日期列用
laydate.render()格式化后显示正常,导出却变成时间戳1712345678000
用 parseData 预处理原始数据
在表格初始化前,把后端返回的原始数据提前按 templet 逻辑加工一遍,让字段值本身即为最终导出内容。
- 适用于字段逻辑固定、不依赖 DOM 或异步操作的场景
- 必须在
table.render()的parseData回调中做映射,不能只靠前端渲染时计算 - 避免重复处理:确保
templet和parseData中的格式逻辑一致
示例:
parseData: function(res){
return {
code: res.code,
count: res.count,
data: res.data.map(function(item){
return {
...item,
price: '¥' + (parseFloat(item.price) || 0).toFixed(2),
status_text: item.status === 1 ? '✅ 已完成' : '⏳ 处理中',
create_time: layui.util.toDateString(item.create_time, 'yyyy-MM-dd HH:mm:ss')
};
})
};
}
然后列配置里 field: 'price' 就能直接导出带符号和小数位的字符串。
用 exportTemplet 替代 templet(仅限导出)
Layui 表格支持为导出单独定义格式逻辑,通过 exportTemplet 字段属性——它只在导出时生效,不影响页面渲染。
-
exportTemplet优先级高于templet,且只用于table.exportFile() - 参数
d是原始数据项,obj包含当前列配置,可安全访问obj.field - 注意:该属性在 Layui 2.8+ 才正式支持,旧版本无效
示例:
{field: 'price', title: '金额',
templet: '<div>¥{{d.price}}</div>',
exportTemplet: function(d){
return '¥' + (parseFloat(d.price) || 0).toFixed(2);
}}
大数据量下慎用前端预处理
当表格启用了服务端分页,且导出需全量数据时,parseData 只处理当前页;若强行拉全量再加工,会显著增加内存占用和生成耗时。
此时更稳妥的做法是:
- 后端直接返回已格式化的字段(如
price_display),前端field指向它 - 或改用 SheetJS 手动构造 Excel:先
table.getData()拿原始数据,再用 JS 做完整格式转换并写入单元格z和s属性
真正容易被忽略的是:templet 是纯视图层行为,而导出是数据流行为——两者解耦是设计使然,强行统一必须显式桥接,没有“自动同步”的捷径。











