不能直接在layui.table的cols中加进度条，因为cols仅控制列定义和标题文字，不支持插入dom节点，且title中html会被转义；需在done回调中手动插入并用element.progress初始化。
为什么不能直接在 layui.table 的 cols 中加进度条？
因为 layui 表格的表头（thead）由框架自动生成，cols 配置只控制列定义和标题文字，不支持插入 dom 节点或自定义 html 结构。强行在 title 字段里写 <div class="layui-progress"></div> 会被转义为纯文本，且无法绑定数据或更新。
用 table.render 的 done 回调手动插入进度条容器
这是最可控的方式：等表格渲染完成、DOM 已就位，再找到表头区域（.layui-table-header 或 .layui-table-box）上方/内部追加进度条结构。
-
done回调中可拿到res（原始数据）、count（总条数），便于计算完成率 - 推荐插入到
.layui-table-box外层容器顶部，避免被表头滚动遮挡 - 用
layui.element.progress初始化，而非手写 CSS —— 否则样式不兼容暗色主题或响应式 - 注意：若表格启用了
height（固定高度），需将进度条放在.layui-table-box外；否则它会随表体滚动消失
table.render({
elem: '#demo',
url: '/api/list',
cols: [[{field:'name', title:'姓名'}]],
done: function(res, curr, count) {
const $box = $(this.elem).closest('.layui-table-box');
const $progressWrap = $box.prev('.global-progress');
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">// 避免重复插入
if (!$progressWrap.length) {
$box.before('<div class="global-progress layui-inline"></div>');
}
const percent = Math.round((res.data.length / count) * 100) || 0;
element.progress('全局加载进度', percent + '%');} });
如何让进度条随异步加载动态更新（比如分页、搜索）？
单纯靠 done
- 使用
table.on('sort(...)、table.on('toolbar(...)等事件，在触发后手动调用element.progress() - 更稳妥的做法：统一拦截
table.reload()，在before阶段显示“加载中”，done中更新百分比 - 如果后端返回的是分页数据（
data数组长度 ≠ 总数），必须依赖接口返回的count字段，不能用res.data.length做分子 - 进度条文案建议用
element.progress('全局加载进度', '0%')初始化，避免首次done执行前空白
容易被忽略的样式与定位问题
默认插入的进度条会撑开布局，且没有固定宽度约束，尤其在窄屏下可能换行或溢出：
- 必须给外层容器加
width: 100%和padding: 0 15px（对齐表头内边距） - 如果表格有左右滚动，进度条需设置
position: sticky; top: 0; z-index: 100，但要注意 Layui 表格本身已用transform，可能干扰sticky，此时改用position: absolute+ 动态left偏移更可靠 - 移动端下，
layui-progress默认宽度是200px，需用 CSS 强制设为100%并加box-sizing: border-box - 别忘了在
table.destroy()时移除对应进度条 DOM，否则多次渲染会残留多个
复杂点在于：这个“全局”进度条其实不是真正意义上的全局（比如跨多个 table 实例），它只属于当前表格实例；若页面有多个表格共用同一进度语义，就得抽离成独立组件，用事件总线通信 —— Layui 本身不提供这种机制，得自己补。
