Layui数据表格如何设置某一列的数据格式化为百分比-Layui教程-PHP中文网

百分比字段原始值通常是小数（如0.87），少数为整数（如87）；layui不自动识别百分比语义，需在templet中按类型安全格式化并处理空值，导出和排序均依赖原始数字类型。

百分比字段原始值是小数还是整数？

Layui 表格不自动识别百分比语义，它只认你传进来的原始数值。后端返回 rate: 0.87 和 rate: 87 是完全不同的两种情况：

大多数 API 返回的是小数（如 0.87），此时需在 templet 里乘 100 再加 %
少数后端直接返回整数（如 87），这时直接加 % 即可，别重复 ×100

空值必须单独判断，否则 null * 100 得 0，再拼 % 就变成 "0%"，掩盖真实缺失

templet 里怎么安全格式化百分比？

用函数形式的 templet，别依赖模板字符串（它不支持条件逻辑）：

templet: function(d) {
  if (d.rate == null || d.rate === '') return '-';
  const val = typeof d.rate === 'number' ? d.rate : parseFloat(d.rate);
  return isNaN(val) ? '-' : (val * 100).toFixed(2) + '%';
}

注意三点：

d.rate 字段名必须和后端返回的 key 完全一致，大小写、下划线都不能错
parseFloat() 能兼容字符串型数字（如 "0.87"），但对 "87%" 这种会截断成 87，得先 .replace('%', '')
toFixed(2) 返回字符串，直接拼 % 没问题；别用 Math.round(val * 100) / 100，它不补零，0.1 会变 "10%" 而非 "10.00%"

导出 Excel 时百分比显示不对怎么办？

表格上看到 "87.00%"，导出文件里却是 0.87 —— 因为 exportFile() 读的是原始数据，不是 templet 渲染结果。

导出前手动构造格式化副本：

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

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

下载

const data = table.cache['yourTableId'];
const exported = data.map(item => ({
  ...item,
  rate: item.rate == null 
    ? '-' 
    : (parseFloat(item.rate) * 100).toFixed(2) + '%'
}));
table.exportFile('报表', exported, 'csv');

关键点：