Layui table 表头插入自定义HTML（如搜索框）需用title函数（≥2.8）或表头外定位方案；title函数返回HTML字符串但不参与列宽计算，易错位；推荐外置搜索框+CSS绝对定位对齐，并监听事件后reload表格。

layui table 表头怎么插入自定义 HTML（比如搜索框）

不能直接在 cols 的 title 字段里写 html —— layui 会自动转义，你看到的是一堆源码字符。必须用 toolbar 配合 dom 手动注入，或者改用 title 的函数式写法（layui 2.8+ 支持）。

• title 字段只接受字符串，写 <input> 会被当纯文本显示
• Layui 2.8 起允许 title 是函数，返回 DOM 元素或 HTML 字符串（仍需注意 XSS 风险）
• 更稳妥的做法：把搜索框放在表头外、表格容器顶部，再用 CSS 对齐到对应列上方

用 title 函数动态生成带 input 的表头（Layui ≥2.8）

这是最接近“嵌入表标题栏”的方案，但要注意它只控制单元格内容，不参与列宽计算，容易错位。

• 写法示例：

  title: function() {
    return '<div class="layui-inline"><input type="text" placeholder="搜索..." class="layui-input" style="width:100px;"></div>';
  }

• 必须给 input 加 style="width:xxx"，否则默认撑满整个表头宽度
• 输入框无法直接绑定事件——每次重绘表格（如分页、排序）都会重建这个 DOM，事件监听要委托到父容器
• 该函数会在每列重复执行，别在里面写全局变量或重复初始化逻辑

实际推荐：表头外挂搜索框 + CSS 定位对齐

绕过 Layui 表头渲染限制，手动在 table 外层加搜索控件，用绝对定位盖到对应列上。稳定、可控、兼容老版本。

• HTML 结构示例：

  <div class="layui-table-search-wrap">
    <input type="text" id="search-name" placeholder="按姓名搜索">
  </div>
  

• CSS 关键点：.layui-table-search-wrap { position: relative; margin-bottom: -36px; z-index: 10; }，然后用 left 偏移对齐目标列
• 监听 input 事件后，调用 table.reload() 并传入 where 参数做服务端过滤
• 如果要做客户端搜索（小数据量），用 table.cache['test'] 拿原始数据自行 filter 再重载

为什么不用 toolbar 或 cols[0].toolbar？

toolbar 是整行工具栏，不是单列标题里的；cols[0].toolbar 是操作列里的按钮，和表头无关。强行塞进去会导致布局错乱、响应式失效，且无法随列宽自适应。

• 常见错误：把搜索框塞进 toolbar: '#searchTpl'，结果它出现在表格右上角，完全不对齐目标列
• 另一个坑：用 fixed: 'left' 列时，绝对定位的搜索框不会随冻结列滚动，需要额外监听 scroll 做同步偏移
• 移动端下，固定定位 + input 聚焦会触发键盘弹出，可能遮挡搜索框本身，得加 scrollIntoView 补救

最麻烦的其实是列宽变化时的对齐维护——只要列宽不是固定像素值（比如用了 minWidth 或百分比），搜索框位置就得重新计算。真要“嵌入”，不如接受它是个视觉伪嵌入，用定位 + 重绘监听来兜底。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！