直接在表格表头写不行，因layui≤2.7及多数解析器会转义html字符防xss；用templet需手动绑定事件，推荐外置搜索框+css对齐，并确保label for-id语义完整。
表格表头里直接写 <input> 为什么不行
因为 title 字段是纯文本渲染区，Layui（≤2.7）和多数原生 HTML 表格解析器会自动对其中的 HTML 字符做转义，你写的 <input type="text"> 最终变成页面上一串可见的源码字符，而不是可操作的输入框。这不是 bug，是安全机制——防止 XSS 注入。
用 templet 渲染表头时必须手动绑定事件
Layui 2.8+ 支持在 cols 配置中为列定义 templet: function(d) { return '<input...>'; }</input...>，但返回的字符串只是静态 HTML，不带事件响应能力。输入框能渲染出来，但聚焦、输入、回车都不触发任何行为。
- 必须在
templet返回后，用layui.table.on('init', ...)或layui.$(document).on('input', '.search-input', ...)绑定事件 - 推荐给每个搜索框加唯一 class，比如
class="search-col-username"，避免全局input事件冲突 - 不要在
templet里写onclick="xxx()"，内联 JS 在动态渲染下不可靠，且无法访问 Layui 实例
外置搜索框 + CSS 对齐比硬塞进表头更稳
把搜索框放在表格上方或右侧容器里，用绝对定位“视觉对齐”到对应列头下方，反而更可控。Layui 表头宽度由列配置决定，而 templet 渲染的输入框不参与列宽计算，容易错位、换行、遮挡排序图标。
- 用
position: relative包裹整个table，再给外置<input>加position: absolute和top/left偏移 - 监听
input事件后调用table.reload({ where: { username: val } })，而非尝试 DOM 操作过滤tbody - 注意移动端：绝对定位在小屏上易被截断，建议加
min-width和overflow-x: auto容器包裹表格
<label></label> for-id 绑定不是可选项，是可访问性刚需
哪怕只是内部工具，没配 <label for="search-name">姓名</label><input id="search-name">，屏幕阅读器就识别不出这个输入框用途，键盘用户 Tab 到它时也无法知道该填什么。这不是“锦上添花”，而是基础合规要求。
-
for属性值必须与input的id完全一致，大小写敏感 - 不要用
display: none隐藏<label></label>，可用position: absolute; clip: rect(0 0 0 0);实现视觉隐藏但保留语义 - 如果搜索框在表头单元格内（通过
templet），<label></label>必须也一起返回，不能只写<input>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
