Layui table表头下拉筛选需用toolbar:true+templet自定义th模板注入select，手动render并委托document监听change事件触发reload，注意样式冲突与iOS溢出问题。

layui table 表头加下拉筛选菜单，本质是自定义表头模板

不是靠内置配置项一键开启，而是用 templet 覆盖表头单元格（thead th），把下拉控件（如 select 或 layui.form().render() 后的下拉）塞进去。layui 的 cols 配置里没有 filter: true 这种东西，别在文档里白找。

必须用 toolbar + templet 组合实现，不能只改 title

直接写 title: '...' 会失效——Layui 初始化时会对 title 做 HTML 转义。正确路径是：在列定义中启用 toolbar: true，再用 templet 返回完整 th 内容（含下拉 + 原标题文字）。

• toolbar: true 是前提，否则 templet 不作用于表头
• templet 函数接收参数 {col, index}，返回字符串，例如：return '
  ' + col.title + '全部
  ';
• 渲染后需手动初始化下拉：layui.form().render('select', 'layui-table-header');

筛选事件绑定要绕开表头重绘，用事件委托

表格排序、分页、重载时，表头会被 Layui 重新生成，直接给 .filter-select 绑 change 会失效。必须用 document 或 layui.table 容器做事件委托。

• 推荐写法：$(document).on('change', '.filter-select', function() { ... });
• 注意取值：$(this).val() 是筛选值，$(this).data('field') 对应列字段名，用来构造查询条件
• 触发表格重载：table.reload('yourTableId', { where: { status: val } });，别用 table.cache 手动过滤，那不走服务端且不更新分页

移动端适配和样式冲突是高频翻车点

Layui 默认表头高度固定（40px），塞进 select 后容易撑高或截断；另外 form.render() 加的边框/圆角和表格主题色可能打架。

• 加 CSS 强制约束：.layui-table-header .filter-select { height: 28px; padding: 0 10px; margin-left: 8px; }
• 避免和 Layui 主题冲突：不要用 layui-form-pane 类，用原生 select + form.render('select') 即可
• 真机测试时重点看 iOS Safari：下拉弹层可能被表格容器 overflow: hidden 切掉，临时方案是给 .layui-table-box 加 overflow: visible（但会影响横向滚动，慎用）

表头下拉筛选看着简单，实际卡在三处：模板注入时机、事件生命周期、样式隔离。哪一环没对齐，就只能看到空白 select 或点不动。