在 Layui table 的 templet 中插入图标，直接写 即可，需确保 CSS 加载、类名正确、Unicode 用 ... 实体格式；推荐用函数动态返回图标字符串，事件绑定应使用委托方式。
layui table 的 templet 里怎么插入图标组件
直接在 templet 字符串或函数返回值中写 <i class="layui-icon"></i> 就行，但得注意图标的 html 是纯静态的，不会自动初始化 layui 的图标字体渲染逻辑——而实际上根本不需要“初始化”，layui 图标本质就是 css 类 + unicode 字符，只要样式加载了，写对类名和字符就显示。
常见错误是照着文档抄 layui.use('icon') 或试图用 layui.icon()（这函数根本不存在），白折腾；还有人写成 <icon type="edit"></icon>，这是 Element 或 Ant Design 的写法，Layui 不认。
-
templet返回字符串时，确保包含完整的<i class="layui-icon"></i>结构，比如'<i class="layui-icon"></i>' - Unicode 字符要用
...实体写法（不能直接粘贴图标字符，容易编码错乱） - 如果表格启用了
skin: 'row'或自定义 CSS，检查是否意外覆盖了.layui-icon的font-family或color
用 templet 函数动态控制图标显隐和类型
比写死字符串更常用的是用函数判断条件，返回不同图标。比如状态列根据 data.status 显示对勾或叉号，这时候别拼接字符串，用模板字面量更安全。
容易踩的坑是把 JS 逻辑写太重：比如在 templet 里发请求查图标配置、或调用未定义的工具函数，这会导致表格渲染卡顿甚至报错；templet 函数必须同步、轻量、无副作用。
- 推荐写法：
templet: function(d) { return d.status === 1 ? '<i class="layui-icon"></i>' : '<i class="layui-icon"></i>'; } - 避免在函数里访问
layui.$或操作 DOM，表格重绘时会反复执行，性能敏感 - 图标 Unicode 可查官网图标库页，或直接打开
layui.css搜layui-icon-找对应码位
图标点击事件绑定不到？因为 templet 渲染后没事件委托
在 templet 里写的 <i></i> 标签默认没 click 行为，你加 onclick="xxx()" 看似能用，但不推荐：全局函数污染、无法访问 d 数据、不好维护。
正确做法是用事件委托，监听表格容器的 click，再用属性选择器区分图标。Layui 表格本身不提供图标级事件钩子，得自己补。
- 给图标加唯一标识，比如
<i class="layui-icon btn-edit" data-id="' + d.id + '"></i> - 在
table.render()后，用layui.$('#your-table-id').on('click', '.btn-edit', function(){...}) - 别用
document.querySelector直接绑，表格分页/重载后事件就丢了 - 如果用了
done回调，在里面重新绑定也行，但委托到父容器更省事
为什么图标显示为空心方块或小方框
基本就是字体没加载成功或类名写错。Layui 图标依赖 layui-icon 这个类触发字体渲染，漏掉它或拼错（比如写成 lay-icon）就会 fallback 到系统默认字体，显示乱码方块。
另一个隐蔽原因是页面引入了多个版本的 layui.css，旧版图标码位和新版不一致，比如 在 2.8.17 是“添加”，在 2.9.0 可能被挪走——查你当前用的 Layui 版本对应的图标页最准。
- 打开浏览器开发者工具，选中图标元素，看 computed 样式里
font-family是否为"layui-icon" - 检查网络面板，确认
layui.css加载成功且状态码是 200，不是 404 或 MIME 错误 - 用
layui.cache.version查当前版本，然后去官网对应版本文档页复制图标码位
图标这事看着小，但跨项目复制代码时，CSS 路径、版本、字符实体写法、事件绑定方式，四个点错一个就白忙活半天。
