Layui表格单元格内如何嵌入layui的Steps步骤条组件-Layui教程-PHP中文网

layui steps 组件不能直接在表格单元格内初始化，因其依赖真实 dom 且表格单元格会动态重建；正确做法是在 templet 中返回唯一 id 容器，于 table.done 回调中按行手动调用 steps.render() 渲染。

layui表格单元格内如何嵌入layui的steps步骤条组件

Steps 组件不能直接在表格单元格内初始化

Layui 的 steps 是依赖 DOM 节点渲染的组件，而表格（table.render）在渲染时会对单元格内容做 HTML 转义或惰性处理，直接写入 <div class="layui-steps"></div> 不会自动初始化，也不会触发 layui.use('steps') 的渲染逻辑。

根本原因是：表格的 cols 中的 templet 返回的是字符串，Layui 不会主动对其中的 DOM 重新执行模块解析；steps.render() 也要求目标容器已存在于真实 DOM 中且未被销毁 —— 而表格单元格在分页、重载、排序后会被反复重建。

不要在 templet 里直接写 <div class="layui-steps"> 并期望它自动生效<li>不要在 <code>done 回调里对所有 .layui-steps 全局调用 steps.render()，因为翻页后新单元格不会被覆盖到
避免在 templet 中用 layui.use 异步加载模块，会导致多次重复加载或时机错乱

正确做法：用 templet 返回唯一 ID 容器 + done 中按行手动渲染

核心思路是「延迟渲染」：先让表格输出带唯一标识的空容器，等整张表渲染完成（done），再遍历当前页可见行，对每个目标单元格调用 steps.render()。

示例（假设步骤状态来自 row.status 字段）：

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

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

下载

table.render({
  elem: '#demo',
  url: '/api/list',
  cols: [[
    {field: 'title', title: '标题'},
    {
      field: 'status',
      title: '进度',
      templet: function(d) {
        return '<div id="steps-' + d.id + '"></div>';
      }
    }
  ]],
  done: function(res, curr, count) {
    // 确保 steps 模块已加载
    layui.use('steps', function(steps) {
      res.data.forEach(function(row) {
        var elem = document.getElementById('steps-' + row.id);
        if (elem) {
          steps.render({
            elem: elem,
            width: '100%',
            steps: [
              {title: '提交', index: 0, desc: row.submit_time || '-'},
              {title: '审核', index: 1, desc: row.audit_time || '-'},
              {title: '完成', index: 2, desc: row.finish_time || '-'}
            ],
            // 根据 row.status 控制当前步骤（0/1/2）
            step: row.status || 0
          });
        }
      });
    });
  }
});

templet 中必须用 id 区分每行，不能用 class（否则无法精准定位）
done 中只处理 res.data 当前页数据，不操作 DOM 全局查询，避免跨页污染
如果表格开启 height 或虚拟滚动，需监听 scroll 或使用 table.on('rendered') 补充渲染（Layui 2.8+ 支持）

遇到步骤条不显示或错位？检查三个关键点

常见现象：空白、堆叠成一行、文字溢出、样式丢失 —— 基本都卡在这三处：

steps 容器宽度为 0：确保 templet 返回的 <div> 在表格单元格中有明确宽度（如加 <code>style="min-width: 200px;"），或在 CSS 中设置 #steps-xxx { width: 100%; }
步骤数据为空数组或字段缺失：传给 steps.render() 的 steps 数组长度必须 ≥ 2，且每个对象至少含 title；step 值必须是合法索引（0 到 steps.length - 1）
CSS 被表格样式覆盖：Layui 表格单元格默认 white-space: nowrap，会挤垮 steps 的多行布局，可在自定义样式中重置：.layui-table td .layui-steps { white-space: normal; }

更复杂的交互？别在单元格里绑 click

如果需要点击某一步骤跳转或弹窗，不要在 templet 里写 onclick，也不要给步骤条内部元素加事件监听 —— 渲染后 DOM 结构由 steps 模块动态生成，结构不稳定。

推荐方案是：用事件委托绑定到表格主体，过滤目标步骤容器：

$('#demo').on('click', '.layui-step-main', function(e) {
  var $target = $(e.target);
  var $stepWrap = $target.closest('.layui-steps');
  var id = $stepWrap.attr('id'); // 如 "steps-123"
  var recordId = id.replace('steps-', '');
<p>// 根据 recordId 做后续操作
console.log('点击了记录', recordId);
});</p>