Layui表格导出功能如何将布尔值转化为“是/否”文本导出

胖芳姑娘_6629

胖芳姑娘_6629

2026-05-20

381人浏览

原创

应将布尔字段在导出前转为“是/否”:用map遍历table.cache数据,对对应字段做item.field == null ? '' : (item.field ? '是' : '否')处理,再通过exportfile第二个参数传入加工后的数组。

layui表格导出功能如何将布尔值转化为“是/否”文本导出

layui table.exportFile 导出时布尔值显示为 true/false 怎么办

导出的 Excel 里 true 和 false 看着不像业务语言,用户要的是“是/否”。Layui 的 exportFile 不会自动格式化字段值,它只按原始数据吐出,所以得在导出前把布尔字段提前转成字符串。

关键不是改导出逻辑,而是改传给 exportFile 的数据源 —— 必须用处理后的数组,而不是直接传 table.cache['xxx'] 原始缓存。

  • 别直接用 table.cache['demo'] 当导出参数,那是原始数据,布尔没转换
  • 导出前用 map 遍历,对目标字段做 item.flag ? '是' : '否' 判断
  • 字段名要和表格列定义里的 field 一致,比如列配置是 {field: 'is_active', title: '启用状态'},那就处理 item.is_active
  • 注意 null/undefined 场景,建议加兜底: item.is_active == null ? '' : (item.is_active ? '是' : '否')

用 exportFile 第二个参数 data 覆盖原始数据

exportFile 支持传入自定义 data 数组,这是最干净的介入点。你不用动模板、不改列配置、也不需要重写导出方法,只要把加工好的数组塞进去就行。

示例场景:表格 ID 是 testTable,要导出的布尔字段叫 valid:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
let cacheData = table.cache['testTable'];
let exportData = cacheData.map(item => ({
  ...item,
  valid: item.valid == null ? '' : (item.valid ? '是' : '否')
}));
table.exportFile('testTable', exportData, { type: 'csv' });
  • 必须用对象展开符 {...item} 保留其他字段,否则只留下 valid 一个字段
  • 如果导出 Excel(type: 'xlsx'),同样适用;但注意 xlsx 依赖 SheetJS,需确保已加载 lay/modules/excel.js
  • 不要在 cols 配置里用 templet 处理,那只是渲染用,不影响导出

导出字段和表格列 field 不一致怎么办

有时后端返回字段是 is_deleted,但表格列显示用的是 deleted 别名,或者用了 parseData 做过映射 —— 这时候一定要以 table.cache 里实际存在的键为准,而不是列配置的 field。

调试方法:在控制台打一行 console.log(table.cache['xxx'][0]),看清楚真实字段名再写转换逻辑。

  • 常见坑:field: 'status' 但接口返回的是 is_enabled,而 parseData 已把它赋给了 status,那缓存里就有 status 字段,直接处理它即可
  • 如果用了 done 回调手动修改了 cache,也要确认修改是否生效到了 table.cache 对象里
  • 避免用 JSON.parse(JSON.stringify()) 深拷贝再处理,有性能浪费且对 Date/Function 会出错;map + {...item} 更轻量安全

导出 CSV 和 XLSX 在布尔处理上有没有区别

没有本质区别。CSV 是纯文本,XLSX 是二进制,但 exportFile 的 data 参数都是同一份 JS 数组,转换逻辑完全复用。唯一差异是 XLSX 对空值更敏感,某些版本遇到 undefined 可能报错 Cannot read property 'v' of undefined。

  • CSV 导出对类型宽松,字符串/数字/布尔都能直接写入,但布尔仍是 true/false 文本
  • XLSX 导出底层调 SheetJS 的 utils.aoa_to_sheet,要求每项都是可序列化的值,null 和 undefined 会被跳过或报错
  • 稳妥做法:所有参与导出的字段都显式转成字符串或基础类型,布尔字段统一走三元判断,null/undefined 统一转空字符串
导出逻辑本身很简单,真正卡住人的永远是没意识到 exportFile 的 data 参数可以接管全部内容 —— 它不是补丁,就是正路。别去翻源码改 excel.js,也别试图 hook templet,就老老实实 map 一遍,事情就完了。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2095

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3162

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1076

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3599

7

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

4071

6

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

2024.03.06

7008

6

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

2025.12.30

814

19

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

694

12

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

2025.12.30

373

8

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习