Layui Steps 组件不能直接在表格单元格内初始化，因其依赖真实 DOM 且表格单元格会动态重建；正确做法是在 templet 中返回唯一 ID 容器，于 table.done 回调中按行手动调用 steps.render() 渲染。
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">并期望它自动生效 - 不要在
done回调里对所有.layui-steps全局调用steps.render()，因为翻页后新单元格不会被覆盖到 - 避免在
templet中用layui.use异步加载模块，会导致多次重复加载或时机错乱
正确做法：用 templet 返回唯一 ID 容器 + done 中按行手动渲染
核心思路是「延迟渲染」：先让表格输出带唯一标识的空容器，等整张表渲染完成（done），再遍历当前页可见行，对每个目标单元格调用 steps.render()。
示例（假设步骤状态来自 row.status 字段）：
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>在表格单元格中有明确宽度（如加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);
});- 监听
.layui-step-main（步骤标题区域）比监听.layui-step-item更可靠，后者可能包含图标、描述等子节点 - 务必用
closest向上找最近的.layui-steps，避免误匹配其他步骤条 - 若表格启用了复选框或工具栏，注意事件冒泡冲突，可加
e.stopPropagation()
Layui 的 Steps 和 Table 都是“静态初始化”设计，强行组合时最易忽略的是「渲染时机」和「DOM 生命周期」—— 单元格不是独立页面，它的 DOM 会消失、重建、复用。每次重绘都要重新 render，且必须确保容器存在、尺寸合理、数据完整。
