表格中无法直接使用layui.step.render,需手写HTML结构模拟步骤条,并在table.done回调中显式显示和样式处理。
表格列中不能直接用 layui.step.render
layui 的 step 组件不是为表格单元格设计的,它依赖 dom 初始化和容器尺寸计算。表格渲染是纯 html 字符串插入(templet 返回字符串),没有生命周期钩子触发组件重绘。你若在 templet 里写 layui.step.render(...),会报错或完全不生效——因为此时 layui 还没加载完,或目标元素尚未挂载到文档流。
必须手动拼写步骤条 HTML 结构
和进度条类似,step 在表格里只能靠手写结构 + 样式模拟。官方扩展的 step 模块本身不提供无依赖的轻量 HTML 片段,所以得自己仿写语义化结构:
- 外层用
<div class="layui-steps"> 包裹,加 <code>style="display:none"防止初始闪动 - 每个步骤用
<div class="layui-step-item">,内部含图标、标题、描述三部分 <li>当前步骤加 <code>layui-this类,已完成步骤加layui-finish类 - 百分比/状态需后端传入整数(如
d.stepStatus === 2表示走到第 2 步),前端做条件判断拼类名
示例 templet 写法:
templet: function(d) {
var stepHtml = '<div class="layui-steps" style="display:none">';
var steps = ['待提交', '审核中', '已通过', '已归档'];
for (var i = 0; i ' +
'<div class="layui-step-icon">' + (i + 1) + '</div>' +
'<div class="layui-step-text">' + steps[i] + '</div>' +
'</div>';
}
stepHtml += '











