templet函数必须返回html字符串，不可返回jquery对象或dom节点；正确写法是拼接完整字符串并转义用户内容防xss，事件和组件初始化须在done回调中委托绑定与执行。
必须用 templet 函数返回 html 字符串，不能返回 jquery 对象、dom 节点或直接调用组件初始化方法；否则单元格空白、报错或渲染失效。
templet 函数必须返回字符串，不是 DOM 或 jQuery 对象
常见错误是写成 templet: function(d) { return layui.$('<button>' + d.status + '</button>'); }——这会导致单元格内容为空，因为 Layui 表格内部用 innerHTML 插入内容，只认字符串。
- 正确写法：拼出完整 HTML 字符串，如
templet: function(d) { return '<button class="layui-btn layui-btn-xs" data-id="' + d.id + '">' + (d.status === 1 ? '启用' : '禁用') + '</button>'; } - 外层用单引号，HTML 属性统一用双引号，避免引号嵌套冲突
- 若字段值含双引号（如
d.name === 'Alice "Dev"'），必须用layui.laytpl.escape(d.name)转义，否则破坏 HTML 结构 - 值为
null或undefined时要兜底，比如var name = d.name || ''，否则控制台报错、单元格留空
动态渲染不同结构，靠 if/else 写在 templet 函数里
想让“草稿行只显示编辑按钮，已发布行显示下架+禁用按钮”，不能靠 toolbar 或点击事件里判断——那是事后补救，DOM 已冗余且状态易错乱。
- 必须在
templet函数内用if/else或switch分支，根据d.status、d.type等字段返回不同 HTML - 示例：
templet: function(d) { if(d.status === 'draft') { return '<button class="layui-btn layui-btn-xs">编辑</button>'; } else if(d.status === 'published') { return '<button class="layui-btn layui-btn-xs">下架</button><button class="layui-btn layui-btn-xs layui-btn-danger">禁用</button>'; } return '—'; } - 禁止在模板里发起请求、修改全局变量或调用
laytpl.render()等副作用操作，它只负责“画出来”
需要初始化组件（如进度条、开关）？templet 只输出容器，done 回调里再调用
像 layui.progress()、layui.form().switch() 这类组件，不能在 templet 字符串里直接调用——此时 DOM 还没挂载，模块也未就绪。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
templet只负责输出带data-*属性的容器，例如：templet: function(d) { return '<div class="layui-progress" data-percent="' + (d.rate || 0) + '" data-color="#5FB878"></div>'; } - 所有初始化逻辑必须放在
table.render的done回调里，用layui.$('.layui-progress[data-percent]').each(...)遍历并调用layui.progress(elem[0], {...}) - 注意传参：第一个参数必须是原生 DOM 元素（
elem[0]），不是 jQuery 对象；data-percent为null时要 fallback 到0，否则layui.progress可能不渲染
事件绑定必须委托，不能写 onclick 或每行单独 bind
在 templet 里写 onclick="handleClick()" 看似简单，但分页、搜索、reload 后 DOM 重建，内联事件会丢失，也无法访问当前行数据 d。
- 统一在
done回调里用事件委托：layui.$(elem).on('click', 'td[data-field="status"] button', handler) - 通过
$(this).closest('tr').data('index')拿到行索引，再查table.cache[tableId][index]获取原始数据 - 避免给每个按钮单独
addEventListener，防止重复绑定和内存泄漏 - 如果用了
layer.tips()类浮层提示，也要在done里统一处理，并监听mouseenter和touchstart以兼容移动端
最易被忽略的是：所有依赖 DOM 存在的操作（组件初始化、事件绑定、tooltip、截断提示）都必须等 done 触发后执行；而 templet 本身只做纯字符串拼接，越轻量越稳。一旦混入 DOM 操作或异步逻辑，表格重绘时就会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
