Layui如何实现在数据表格中根据数值大小显示不同长度的横向进度条-Layui教程-PHP中文网

直接用 laytpl 渲染进度条失效，因 table.render() 默认 html 转义；需用 templet 函数返回未转义字符串，并加 unresize: true 防列宽异常。

layui如何实现在数据表格中根据数值大小显示不同长度的横向进度条

为什么直接用 `laytpl` 渲染进度条会失效？

因为 Layui 的 table.render() 默认会对单元格内容做 HTML 转义，你传进去的 <div class="layui-progress">...</div> 会被当成纯文本显示，而不是渲染成真实 DOM。这不是模板写错了，是表格组件主动“防 XSS”导致的。

解决办法只有一个：用 templet 函数返回未转义的 HTML 字符串，并在配置中显式声明 unresize: true（可选，但能避免列宽被进度条撑乱）。

必须返回字符串，不能返回 jQuery 对象或 DOM 节点
不要在 templet 里调用 layui.element.render('progress') —— 表格重绘时它不会自动执行
进度条样式依赖 Layui 自带的 CSS，确保已加载 layui.css

怎么写一个安全又可控的进度条 `templet`？

核心是把数值映射为 lay-percent 值，并控制最大值边界（比如数据是 0–100、0–500 或负数都要兼容）。别硬编码 100%，用 JS 计算更稳妥。

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

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

下载

templet: function(d) {
  // 假设字段叫 score，取值范围 0–500，想映射到 0%–100%
  const max = 500;
  const percent = Math.min(100, Math.max(0, (d.score / max) * 100));
  return `
    <div class="layui-progress layui-progress-big" lay-showpercent="yes">
      <div class="layui-progress-bar" lay-percent="${percent}%"></div>
    </div>
  `;
}

Math.max(0, ...) 防止负数导致进度条反向或异常
Math.min(100, ...) 防止超限值让进度条溢出容器
lay-showPercent="yes" 是 Layui 进度条的内置属性，不加就不会显示百分比数字

如果数值本身是百分比（如 85.5），还要再除 100 吗？

不用。Layui 的 lay-percent 属性接受的是带 % 的字符串，比如 "85.5%"，不是小数 0.855。所以直接拼接即可：

templet: function(d) {
  const raw = parseFloat(d.rate) || 0; // 确保是数字
  const percent = Math.min(100, Math.max(0, raw));
  return `<div class="layui-progress"><div class="layui-progress-bar" lay-percent="${percent}%"></div></div>`;
}

如果后端返回的是 "85.5"（字符串），parseFloat 能正确转成 85.5
如果返回的是 0.855（小数），那就得乘 100：(raw * 100).toFixed(1)
务必用 || 0 防止 NaN 导致整个单元格空白

为什么进度条颜色没变？怎么自定义颜色？

Layui 默认只提供 layui-bg-red、layui-bg-green 等几个预设类，它们作用在 .layui-progress-bar 上，不是外层容器。直接加 class 就行，无需 JS 控制：

templet: function(d) {
  let barClass = 'layui-bg-blue';
  if (d.score > 400) barClass = 'layui-bg-green';
  else if (d.score const percent = Math.min(100, Math.max(0, (d.score / 500) * 100));
return <code> <div class="layui-progress layui-progress-big"> <div class="layui-progress-bar ${barClass}" lay-percent="${percent}%"></div> </div> </code>;
}